jquery - 使用jQuery的标签 View

以下选项卡视图由于某种原因未切换窗格。
我确定我在这里做的没错，但是无论我单击哪个选项卡，内容窗格都保持不变。

这是代码

的HTML

<!-- the tabs -->
<ul class="tabs">
  <li><a href="#first">Tab 1</a></li>
  <li><a href="#second">Tab 2</a></li>
  <li><a href="#third">Tab 3</a></li>
</ul>

 <!-- tab "panes" -->
 <div class="panes">
   <div><a href="#first">
    First pane.</a>
   </div>
   <div><a href="#second">
     Second pane. You can open other tabs with normal
     </a>
    </div>
    <div><a href="#third">
     Third tab content</a>
    </div>
  </div>

的CSS

ul.tabs {
margin:0 !important;
padding:0;
height:30px;
border-bottom:1px solid #666;
 }

 /* single tab */
 ul.tabs li {
    float:left;
     padding:0;
     margin:0;
     list-style-type:none;
  }

 /* link inside the tab. uses a background image */
 ul.tabs a {
float:left;
font-size:13px;
display:block;
padding:5px 30px;
text-decoration:none;
border:1px solid #666;
border-bottom:0px;
height:18px;
background-color:#efefef;
color:#777;
margin-right:2px;
position:relative;
top:1px;
outline:0;
-moz-border-radius:4px 4px 0 0;
}

 ul.tabs a:hover {
     background-color:#F7F7F7;
    color:#333;
 }

 /* selected tab */
 ul.tabs a.current {
     background-color:#ddd;
     border-bottom:1px solid #ddd;
     color:#000;
     cursor:default;
  }


  /* tab pane */
       .panes {

          border:1px solid #666;
           border-width:0 1px 1px 1px;
           min-height:150px;
           padding:15px 20px;
           background-color:#ddd;
      }

jQuery的

  $("ul.tabs").tabs("div.panes > div"); (include the jquery tools lib also)

此选项卡来自this网站，因此所有代码几乎都未更改。我所要做的就是我刚刚从display:none类中删除了.pane，其余的都是一样的。

最佳答案

尝试这个。

<ul class="tabs">
    <ul>
        <li><a href="#first">Tab 1</a></li>
        <li><a href="#second">Tab 2</a></li>
        <li><a href="#third">Tab 3</a></li>
    </ul>

    <div id="first">First pane.</div>
    <div id="second">Second pane.</div>
    <div id="third">Third tab content</div>
</ul>

<script language="javascript">
    $(document).ready(function(e) {
        $('.tabs').tabs();
    });
</script>