0

这是小提琴：http: //jsfiddle.net/timlcooley/LrqT7/3/

我让我的代码做我想做的事，但是在页面加载时，我不知道如何隐藏序列中的第二个和第三个 div。当你按下按钮时它工作正常，但在页面加载时它被破坏了。查询

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;    
}

谢谢您的帮助。

4

5 回答 5

2

做

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(0).click();

演示：小提琴

如果您希望能够将三个项目中的任何一个设置为默认项目，那么

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();
}).filter('.selected').click()

演示：小提琴

于 2013-05-03T07:11:31.740 回答
0

你可以简单地隐藏那些 div。

<div style="display:none;">
   <h3>Secure Login</h3>
   <h3>Secure Login</h3>
   <h3>Secure Login</h3>
   <h3>Secure Login</h3>
</div>
<div style="display:none;">
   <h3>Online Support</h3>
   <h3>Online Support</h3>
   <h3>Online Support</h3>
   <h3>Online Support</h3>
</div>
于 2013-05-03T07:10:44.193 回答
0

你只需要初始化index_obtained_from_the_querystring.

index_obtained_from_the_querystring = index_obtained_from_the_querystring || 0;
于 2013-05-03T07:15:54.930 回答
0

你可以这样做：

var $items = $('#vtab>ul>li');

$('#vtab>div').hide().eq(0).show(); // Index 0 for the first item

$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();
于 2013-05-03T07:15:58.533 回答
0

将 display:none 添加到#vtab->div. 将选定的类添加到您默认的第一个 div，然后添加一个#vtab->div.selected { display:block; }

见http://jsfiddle.net/LrqT7/5/

于 2013-05-03T07:16:02.920 回答