jquery（ios兼容）的CSS選項卡

Question

我想讓我的css選項卡兼容移動設備，尤其是IOS。另外我想在我的頁面上使用3個不同的選項卡。我沒有jQuery的知識，所以我試圖找到一個例子。我發現的最好的例子是使用這種結構;

<ul id="tabs"> 
<li><a href="#" name="tab1">One</a></li> 
<li><a href="#" name="tab2">Two</a></li> 
<li><a href="#" name="tab3">Three</a></li> 
<li><a href="#" name="tab4">Four</a></li>  
</ul> 

<div id="content"> 
<div id="tab1">...</div> 
<div id="tab2">...</div> 
<div id="tab3">...</div> 
<div id="tab4">...</div> 
</div> 

及其jQuery是;

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script> 
$(document).ready(function() { 
    $("#content div").hide(); // Initially hide all content 
    $("#tabs li:first").attr("id","current"); // Activate first tab 
    $("#content div:first").fadeIn(); // Show first tab content 

    $('#tabs a').click(function(e) { 
     e.preventDefault(); 
     if ($(this).closest("li").attr("id") == "current"){ //detection for current tab 
     return  
     } 
     else{    
     $("#content div").hide(); //Hide all content 
     $("#tabs li").attr("id",""); //Reset id's 
     $(this).parent().attr("id","current"); // Activate this 
     $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab 
     } 
    }); 
}); 
</script> 

有一個小問題。我不想使用標籤作爲標籤。我改變了id，然後修改了CSS。我試圖修改劇本，但它不會工作:( 有我的網頁上三個不同的選項卡組，這就是爲什麼我將其更改爲類 我的新選項卡。

<ul class="tabs"> 
<li><a href="#" name="tab1">One</a></li> 
<li><a href="#" name="tab2">Two</a></li> 
<li><a href="#" name="tab3">Three</a></li> 
<li><a href="#" name="tab4">Four</a></li>  
</ul> 

<div class="tabs_content"> 
<div id="tab1">...</div> 
<div id="tab2">...</div> 
<div id="tab3">...</div> 
<div id="tab4">...</div> 
</div> 

並試圖改變的jQuery如;

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script> 
$(document).ready(function() { 
    $(".tabs_content div").hide(); // Initially hide all content 
    $(".tabs li:first").attr("id","current"); // Activate first tab 
    $(".tabs_content div:first").fadeIn(); // Show first tab content 

    $('.tabs a').click(function(e) { 
     e.preventDefault(); 
     if ($(this).closest("li").attr("id") == "current"){ //detection for current tab 
     return  
     } 
     else{    
     $(".tabs_content div").hide(); //Hide all content 
     $(".tabs li").attr("id",""); //Reset id's 
     $(this).parent().attr("id","current"); // Activate this 
     $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab 
     } 
    }); 
}); 
</script> 

能否請你幫我用jQuery的或者在同一頁內展示我要多標籤表一個更好的例子 Thanx提前

編輯：有了變化，現在，當我使用？一個標籤組其他標籤組的內容被隱藏:)

這是CSS文件;

.tabs{ 
     overflow: hidden; 
     width: 100%; 
     margin: 0; 
     padding: 0; 
     list-style: none; 
    } 

    .tabs li{ 
     float: left; 
     margin: 0 .5em 0 0; 
    } 

    .tabs a{ 
     position: relative; 
     background: #ddd; 
     background-image: linear-gradient(to bottom, #fff, #ddd); 
     padding: .7em 3.5em; 
     float: left; 
     text-decoration: none; 
     color: #444; 
     text-shadow: 0 1px 0 rgba(255,255,255,.8); 
     border-radius: 5px 0 0 0; 
     box-shadow: 0 2px 2px rgba(0,0,0,.4); 
    } 

    .tabs a:hover, 
    .tabs a:hover::after, 
    .tabs a:focus, 
    .tabs a:focus::after{ 
     background: #fff; 
    } 

    .tabs a:focus{ 
     outline: 0; 
    } 

    .tabs a::after{ 
     content:''; 
     position:absolute; 
     z-index: 1; 
     top: 0; 
     right: -.5em; 
     bottom: 0; 
     width: 1em; 
     background: #ddd; 
     background-image: linear-gradient(to bottom, #fff, #ddd); 
     box-shadow: 2px 2px 2px rgba(0,0,0,.4); 
     transform: skew(10deg); 
     border-radius: 0 5px 0 0; 
    } 

    .tabs #current a, 
    .tabs #current a::after{ 
     background: #fff; 
     z-index: 3; 
    } 

    .tabs_content 
    { 
     background: #fff; 
     padding: 2em; 
     height: 220px; 
     position: relative; 
     z-index: 2; 
     border-radius: 0 5px 5px 5px; 
     box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5); 
    } 

My new settings are; 

Script is; 

    <script type="text/javascript" src="jquery-1.8.1.js"></script> 

    <script> 
    $(function(){ 
     //INIT IS NOT NECESSARY IF YOU FOLLOW MY CODE 

    $("#tabs a").click(function(){ 
     //ADD ACTIVE CLASS 
     $(this).parent().siblings().removeClass("current"); 
     $(this).parent().addClass("current"); 
     //SHOW CONTENT 
     $(".content-holder").removeClass("current"); 
     var myIndex = $(this).parent().index(); // gets the index of the LI clicked 
     $(".content-holder").eq(myIndex).fadeIn(); 
    }); 
    }); 
    </script> 
HTML is; 

     <ul class="tabs"> 
     <li class="tab current"><a href="#" name="tab1">One</a></li> 
     <li class="tab"><a href="#" name="tab2">Two</a></li> 
     <li class="tab"><a href="#" name="tab3">Three</a></li> 
     <li class="tab"><a href="#" name="tab4">Four</a></li>  
     </ul> 

     <div class="content"> 
     <div class="content-holder current" id="tab1">content1</div> 
     <div class="content-holder" id="tab2">content2</div> 
     <div class="content-holder" id="tab3">content3</div> 
     <div class="content-holder" id="tab4">content4</div> 
     </div> 


and my css is; 
.tabs{ 
    overflow: hidden; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

.tabs li{ 
    float: left; 
    margin: 0 .5em 0 0; 
} 

.tabs a{ 
    position: relative; 
    background: #ddd; 
    background-image: linear-gradient(to bottom, #fff, #ddd); 
    padding: .7em 3.5em; 
    float: left; 
    text-decoration: none; 
    color: #444; 
    text-shadow: 0 1px 0 rgba(255,255,255,.8); 
    border-radius: 5px 0 0 0; 
    box-shadow: 0 2px 2px rgba(0,0,0,.4); 
} 

.tabs a:hover, 
.tabs a:hover::after, 
.tabs a:focus, 
.tabs a:focus::after{ 
    background: #fff; 
} 

.tabs a:focus{ 
    outline: 0; 
} 

.tabs a::after{ 
    content:''; 
    position:absolute; 
    z-index: 1; 
    top: 0; 
    right: -.5em; 
    bottom: 0; 
    width: 1em; 
    background: #ddd; 
    background-image: linear-gradient(to bottom, #fff, #ddd); 
    box-shadow: 2px 2px 2px rgba(0,0,0,.4); 
    transform: skew(10deg); 
    border-radius: 0 5px 0 0; 
} 

.tabs #current a, 
.tabs #current a::after{ 
    background: #fff; 
    z-index: 3; 
} 

.content 
{ 
    background: #fff; 
    padding: 2em; 
    height: 220px; 
    position: relative; 
    z-index: 2; 
    border-radius: 0 5px 5px 5px; 
    box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5); 
} 

.content-holder { 
    display:none; 
} 
.content-holder.current { 
    display:block; 
} 

Answer 1

我設置了一個可以處理多個標籤集的插件。

(function ($) { 
    $.fn.tabset = function() { 
     var $tabsets = $(this); 
     $tabsets.each(function (i) { 
      var $tabs = $('li.tab a', this); 
      $tabs.click(function (e) { 
       var $this = $(this); 
        panels = $.map($tabs, function (val, i) { 
         return $(val).attr('href'); 
        }); 
       $(panels.join(',')).hide(); 
       $tabs.removeClass('selected'); 
       $this.addClass('selected').blur(); 
       $($this.attr('href')).show(); 
       e.preventDefault(); 
       return false; 
      }).first().triggerHandler('click'); 
     }); 
     }; 
})(jQuery); 

您必須將html包含在包含選項卡和內容的div中。另外你需要更新你的錨使用標準的哈希標籤，見下圖：

<div class="tabset"> 
    <ul class="tabs"> 
     <li class="tab"><a href="#tab1">One</a></li> 
     <li class="tab"><a href="#tab2">Two</a></li> 
     <li class="tab"><a href="#tab3">Three</a></li> 
     <li class="tab"><a href="#tab4">Four</a></li>  
    </ul> 

    <div class="panel" id="tab1">...</div> 
    <div class="panel" id="tab2">...</div> 
    <div class="panel" id="tab3">...</div> 
    <div class="panel" id="tab4">...</div> 
</div> 

你可以把它像這樣：

$('div.tabset').tabset(); 

你可以看到一個工作示例包括三名標籤集在： http://jsfiddle.net/rustyjeans/XVp5X/

Answer 2

jQuery UI的救援：jqueryui.com/demos/tabs 他們是嵌套的開箱即用。

看到這個例子：http://jsbin.com/ubaqe找到here。

[你說你「用類修改了id然後修改了CSS」 - 看到這些修改會有幫助。在你粘貼你的「新標籤」的地方，沒有什麼看起來不同，除了你已經遺漏了jQuery！]

[只有3個選項卡並不能解釋你爲什麼寧願使用類而不是ID。 ]

[如果你離開代碼原樣，只是修剪出從HTML 4片<li>和<div>，現有的jQuery應切實表明無論你在的div放置（其中現在有省略號）在＃內內容。]

Answer 3

我建議改變你的「當前」類，而不是使用ID。

$(function(){ 
    //INIT IS NOT NECESSARY IF YOU FOLLOW MY CODE 

    $("#tabs a").click(function(){ 
     //ADD ACTIVE CLASS 
     $(this).parent().siblings().removeClass("current"); 
     $(this).parent().addClass("current"); 
     //SHOW CONTENT 
     $(".content-holder").removeClass("current"): 
     var myID = $(this).attr("name"); 
     $("#" + myID).fadeIn(); 
    }); 
}); 

我最好設置你的HTML最初這樣，你可以擺脫unneccesary JS的inits

<ul class="tabs"> 
    <li class="tab current"><a href="#" name="tab1">One</a></li> 
    <li class="tab"><a href="#" name="tab2">Two</a></li> 
    <li class="tab"><a href="#" name="tab3">Three</a></li> 
    <li class="tab"><a href="#" name="tab4">Four</a></li>  
</ul> 

<div class="content"> 
    <div class="content-holder current" id="tab1">...</div> 
    <div class="content-holder" id="tab2">...</div> 
    <div class="content-holder" id="tab3">...</div> 
    <div class="content-holder" id="tab4">...</div> 
</div> 

設置CSS是這樣的：

.content-holder { 
    display:none; 
} 
.content-holder.current { 
    display:block; 
} 

如果你的內容容器總是遵循與您的導航相同的順序，您也可以僅執行$ .index（）並使用它來設置您的活動...例如：

$("#tabs a").click(function(){ 
    //ADD ACTIVE CLASS 
    $(this).parent().siblings().removeClass("current"); 
    $(this).parent().addClass("current"); 
    //SHOW CONTENT 
    $(".content-holder").removeClass("current"); 
    var myIndex = $(this).parent().index(); // gets the index of the LI clicked 
    $(".content-holder").eq(myIndex).fadeIn(); 
});