0
這裏是小提琴：http://jsfiddle.net/timlcooley/LrqT7/3/如何隱藏在頁面加載二次div的jQuery中
我得到了我的代碼做什麼，我想要它做什麼，但在頁面加載我無法弄清楚如何隱藏序列中的第二個和第三個div。當你點擊按鈕時它工作正常，但是在頁面加載時它被打破了。 JQUERY
var $items = $('#vtab>ul>li')`;
$items.click(function() {
$items.removeClass('selected');
$(this).addClass('selected');
var index = $items.index($(this));
$('#vtab>div').hide().eq(index).show();
}).eq(index_obtained_from_the_querystring).click();
HTML
<div id="vtab">
<ul>
<li class="basics selected"><a href="#">Basics</a>
</li>
<li class="advanced"><a href="#">Advanced</a>
</li>
<li class="combos"><a href="#">Combos</a>
</li>
</ul>
<div>
<h3>Welcome Home!</h3>
<h3>Welcome Home!</h3>
<h3>Welcome Home!</h3>
<h3>Welcome Home!</h3>
</div>
<div>
<h3>Secure Login</h3>
<h3>Secure Login</h3>
<h3>Secure Login</h3>
<h3>Secure Login</h3>
</div>
<div>
<h3>Online Support</h3>
<h3>Online Support</h3>
<h3>Online Support</h3>
<h3>Online Support</h3>
</div>
</div>
CSS 爲了給CSS是爲所有的功能和長
#vtab > ul > li {
width: 25%;
background-color: #fff !important;
list-style-type: none;
display: block;
text-align: center;
border: 1px solid #000;
position: relative;
opacity: .3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
float:left;
border-radius:10px 10px 0 0;
padding:5px;
border-bottom:none;
margin:2px 8px 10px;
}
#vtab > ul > li > a {
text-decoration:none;
text-shadow:#333333 0 -1px 0;
color:#FFF;
font-size:30px;
font-weight:bold;
}
#vtab > ul > li.basics {
background: #4f914e;
/* Old browsers */
background: -moz-linear-gradient(left, #4f914e 0%, #63aa63 30%, #63aa63 70%, #4f914e 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #4f914e), color-stop(30%, #63aa63), color-stop(70%, #63aa63), color-stop(100%, #4f914e));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #4f914e 0%, #63aa63 30%, #63aa63 70%, #4f914e 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #4f914e 0%, #63aa63 30%, #63aa63 70%, #4f914e 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #4f914e 0%, #63aa63 30%, #63aa63 70%, #4f914e 100%);
/* IE10+ */
background: linear-gradient(to right, #4f914e 0%, #63aa63 30%, #63aa63 70%, #4f914e 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f914e', endColorstr='#4f914e', GradientType=1);
/* IE6-9 */
}
#vtab > ul > li.advanced {
background: #dd412c;
/* Old browsers */
background: -moz-linear-gradient(left, #dd412c 0%, #f2552e 30%, #f2552e 70%, #dd412c 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #dd412c), color-stop(30%, #f2552e), color-stop(70%, #f2552e), color-stop(100%, #dd412c));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #dd412c 0%, #f2552e 30%, #f2552e 70%, #dd412c 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #dd412c 0%, #f2552e 30%, #f2552e 70%, #dd412c 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #dd412c 0%, #f2552e 30%, #f2552e 70%, #dd412c 100%);
/* IE10+ */
background: linear-gradient(to right, #dd412c 0%, #f2552e 30%, #f2552e 70%, #dd412c 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dd412c', endColorstr='#dd412c', GradientType=1);
/* IE6-9 */
}
#vtab > ul > li.combos {
background: #2f32ed;
/* Old browsers */
background: -moz-linear-gradient(left, #2f32ed 1%, #2ea7e8 30%, #2ea7e8 70%, #2f32ed 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%, #2f32ed), color-stop(30%, #2ea7e8), color-stop(70%, #2ea7e8), color-stop(100%, #2f32ed));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #2f32ed 1%, #2ea7e8 30%, #2ea7e8 70%, #2f32ed 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #2f32ed 1%, #2ea7e8 30%, #2ea7e8 70%, #2f32ed 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #2f32ed 1%, #2ea7e8 30%, #2ea7e8 70%, #2f32ed 100%);
/* IE10+ */
background: linear-gradient(to right, #2f32ed 1%, #2ea7e8 30%, #2ea7e8 70%, #2f32ed 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f32ed', endColorstr='#2f32ed', GradientType=1);
/* IE6-9 */
}
#vtab > ul > li.selected {
opacity: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
border: 1px solid #ddd;
border-bottom: none;
z-index: 10;
background-color: #fafafa !important;
position: relative;
}
#vtab > div {
clear:both;
overflow:hidden;
}
#vtab div > h3{
background: #990099; /* Old browsers */
background: -moz-linear-gradient(left, #990099 0%, #d300d0 30%, #d300d0 70%, #990099 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#990099), color-stop(30%,#d300d0), color-stop(70%,#d300d0), color-stop(100%,#990099)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #990099 0%,#d300d0 30%,#d300d0 70%,#990099 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #990099 0%,#d300d0 30%,#d300d0 70%,#990099 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #990099 0%,#d300d0 30%,#d300d0 70%,#990099 100%); /* IE10+ */
background: linear-gradient(to right, #990099 0%,#d300d0 30%,#d300d0 70%,#990099 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#990099', endColorstr='#990099',GradientType=1); /* IE6-9 */
border-radius:5px;
margin:2px 0;
font-size:22px;
font-weight:bold;
list-style:none;
margin:2px 8px;
text-align:center;
text-shadow:#333333 0 -1px 0;
color:#FFF;
padding:5px;
width:220px;
}
感謝您的幫助。
只是使用樣式顯示：沒有上格你不希望顯示 – 2013-05-03 07:08:26
檢查了這一點的http：//的jsfiddle .net/rajesh007/LrqT7/4/ – 2013-05-03 07:09:30