سوال: تغییر سایز سربرگ تب به اندازه باکس زیرش [بایگانی]

rezadana

چهارشنبه 11 تیر 1393, 03:23 صبح

سلام.
من میخوام طول تب 1،2،3 برابر بشه با باکس زیرش یعنی اگه باکس زیرش 296 پیکسل بود طول تبهای بالایی هم 296 پیکسل بشه و دوتاش در عمود یکسان قرار بگیرن.
هرچی کدهارو دستکاری میکنم نمیشه.
اگه منظورمو متوجه نشدید کدهای زیر رو کپی کنید تو یه فایل html و اجرا بگیرید اونوقت متوجه میشید چی عرض میکنم. با تشکر.

<html>
<head>
<title>Icomp|Tabbed pannel</title>
<style>
#tabs .tab{
float:right;
border:1px solid #555;
background:#74a400;
padding:10px;
min-width:60px;
width:auto;
text-align:center;
font:13px Tahoma;
cursor:pointer;
}
#boxes{
clear:both;
}
#boxes .box{
float:right;
width:296px;
height:200px;
border:1px solid #74a400;
text-align:right;
font:13px Tahoma;
padding:2px;
display:none;
}
.tab-select{
font-weight:bold;
background:#5f8601 !important;
}
.box-select{
display:block !important;
}

/******** SHADOW 3 *********/
.bx {
width:70%;
height:200px;
background:#FFF;
margin:55px auto;
}

.box
{
position: relative;
background:#FFF;
}
.box:before, .shadow5:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 30px;
left: 2px;
width: 80%;
top: 82%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 35px 20px #777;
-moz-box-shadow: 0 35px 20px #777;
box-shadow: 0 25px 20px #777;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.box:after
{
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}

</style>
<script language="JavaScript">
function clicked(num)
{
var i = 1
for(i=1; i <= 3; i++){
document.getElementById("box-" + i).className="box";
document.getElementById("tab-" + i).className="tab";
}
document.getElementById("box-" + num).className="box box-select";
document.getElementById("tab-" + num).className="tab tab-select";
}
</script>
</head>
<body>
<div id="tab-box">
<div id="tabs">
<div class="tab" id="tab-1" onclick="clicked(1);" >تب 1</div>
<div class="tab" id="tab-2" onclick="clicked(2);" >تب 2</div>
<div class="tab" id="tab-3" onclick="clicked(3);" >تب 3</div>
</div>
<div id="boxes">
<div class="bx box" id="box-1">محتواي تب 1</div>
<div class="box" id="box-2">محتواي تب 2</div>
<div class="box" id="box-3">محتواي تب 3</div>
</div>
</div>
<script language="JavaScript">
document.getElementById("box-1").className="box box-select";
document.getElementById("tab-1").className="tab tab-select";
</script>
</body>
</html>