PDA

View Full Version : مشکل با ساخت tab strip



mahdi1373
جمعه 08 بهمن 1389, 20:52 عصر
سلام،
من دارم یه tab strip می سازم، اما به یه مشکلی بر خوردم. من دوتا کلید دارم که هر کدوم رو فشار بدی، تابع زیر رو با 1 یا 2 فراخوانی می کنه.

function doo (aa) {
var e1 = document.getElementById('div1');
var e2 = document.getElementById('div2');
if (aa==1) {
e1.style.visibility = 'hidden';
e2.style.visibility = 'visible';
}
if (aa==2) {
e2.style.visibility = 'hidden';
e1.style.visibility = 'visible';
}
}div1 و div2 هم دو تا div هستند که پنجره های من اند، اگه 1 ارسال بشه اولی رو مخفی میکنه، دومی رو نشون میده و اگه 2 ارسال شه بر عکس.

حالا مشکل من اینجاست که وقتی این کارو می کنم، هر کلید رو که میزنم، جای div ای رو که مخفی کردم تو صفحه، خالی می مونه. می خواهم اون قسمت خالی خود به خود حذف شه، چکار کنم؟

کلا ایده بهتری دارین برای tab strip؟

hossin.esm
یک شنبه 10 بهمن 1389, 10:32 صبح
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function doo (aa) {
var e1 = document.getElementById('div1');
var e2 = document.getElementById('div2');
if (aa==1) {
//e1.style.visibility = 'hidden';
e1.style.display='none';
e2.style.display='block';
// e2.style.visibility = 'visible';

}
if (aa==2) {
//e2.style.visibility = 'hidden';
e2.style.display='none';
e1.style.display='block';
//e1.style.visibility = 'visible';
}
}
</script>
<style type="text/css">
#headtab ul{list-style:none;display:block;}
#div1{display:block;float:left;width:200px;height: 200px;border:#000 thin solid;}
#div2{display:block;float:left;width:200px;height: 200px;border:#000 thin solid;}
li{float:left;}
</style>
</head>
<body>
<div id="headtab">
<ul>
<li onclick="doo(2)"><a href="#"> div1</a></li>
<li onclick="doo(1)"><a href="#">div2</a></li>
</ul>
</div>
<div id="div1">div1 content </div>
<div id="div2">div2 content </div>
</body>
</html>