使用jQuery的選項卡視圖

以下選項卡視圖由於某種原因未切換窗格。我確信我在這裏沒有錯，但內容窗格保持不變，無論我點擊哪個標籤。使用jQuery的選項卡視圖

下面是代碼

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網站，所以所有的代碼幾乎沒有改變。我所做的只是從.pane類中刪除display:none，其餘都是一樣的。

來源

2012-08-02 user1535882

您是否在控制檯中收到任何錯誤消息？ – 2012-08-02 19:14:07

我沒有控制檯。我正在運行它在記事本++ – user1535882 2012-08-02 19:19:49

你的代碼確實工作http://jsfiddle.net/RYYGu/ – vittore 2012-08-02 19:23:08

試試這個。

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

來源

2012-08-02 19:25:32

這真的很奇怪。它在jsfiddle中工作，但不在谷歌瀏覽器或IE中工作。 – user1535882 2012-08-02 19:46:22

使用jQuery的選項卡視圖

回答

相關問題