如何使用href在標籤之間切換？

Question

我在這裏創建了選項卡式窗格 - LINK

在選項卡1中，我有一段文字。點擊後，我希望顯示第二個標籤。我試過#tab2,#mtabs#tab2等所有變化，但似乎沒有任何工作。

如何導航到第二個標籤的內容？

HTML代碼：

<div id="mtabs"> 
    <ul> 
     <li><a href="#tab1" rel="tab1">Tab 1</a></li> 
     <li><a href="#tab2" rel="tab2">Tab 2</a></li> 
     <li><a href="#tab3" rel="tab3">Tab 3</a></li> 
     <li class="active"><a href="#tab4" rel="tab4">Tab 4</a></li> 
    </ul> 
</div> 

<div id="mtabs_content_container"> 
    <div id="tab1" class="mtab_content"> 
     <p><a href="#mtabs_wrapper#mtabs_content_container#tab2">Take me to Tab 2</a></p> 
    </div> 
    <div id="tab2" class="mtab_content"> 
     <p>Tab content 2</p> 
    </div> 
    <div id="tab3" class="mtab_content"> 
     <p>Tab content 3</p> 
    </div> 
<div id="tab4" class="mtab_content" style="display: block;"> 
    <p>Tab content 4</p> 
    </div> 

</div> 
<!-- Original tabs END --> 

CSS代碼：

#mtabs_wrapper { 
    width: 422px; 
} 
#mtabs_container { 
    border-bottom: 1px solid #ccc; 
} 
#mtabs { 
    list-style: none; 
    padding: 5px 0 4px 0; 
    margin: 0 0 0 0px; 
    /* font: 0.75em arial; */ 
} 
#mtabs li { 
    display: inline; 
} 
#mtabs li a { 
    border: 1px solid #ccc; 
    padding: 4px 6px; 
    text-decoration: none; 
    color:#000; 
    font-family: Artifika, serif; 
    background-color: #eeeeee; 
    font-size:14px; 
    /*border-bottom: 1px solid #ccc; 
    outline: none;*/ 
    border-radius: 5px 5px 5px 5px; 
    -moz-border-radius: 5px 5px 5px 5px; 
    -webkit-border-top-left-radius: 5px; 
    -webkit-border-top-right-radius: 5px; 
} 
#mtabs li a:hover { 
    background-color: #dddddd; 
    padding: 4px 6px; 
} 
#mtabs li.active a { 
    border-bottom: 1px solid #ccc; 
    background-color: #fff; 
    padding: 4px 6px 5px 6px; 
    /*border-bottom: none;*/ 
} 
#mtabs li.active a:hover { 
    background-color: #eeeeee; 
    padding: 4px 6px 5px 6px; 
    /*border-bottom: none;*/ 
} 

#mtabs li a.icon_accept { 
    background-image: url(accept.png); 
    background-position: 5px; 
    background-repeat: no-repeat; 
    padding-left: 24px; 
} 
#mtabs li a.icon_accept:hover { 
    padding-left: 24px; 
} 

#mtabs_content_container { 
    border: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
    padding: 10px; 
    width: 600px; 
} 
.mtab_content { 
    display: none; 
} 

/* TAB CSS END */ 

的Javascript（jQuery的實際）：

$(document).ready(function(){ 
    // When user clicks on tab, this code will be executed 
    $("#mtabs li").click(function() { 
     // First remove class "active" from currently active tab 
     $("#mtabs li").removeClass('active'); 

     // Now add class "active" to the selected/clicked tab 
     $(this).addClass("active"); 

     // Hide all tab content 
     $(".mtab_content").hide(); 

     // Here we get the href value of the selected tab 
     var selected_tab = $(this).find("a").attr("href"); 

     // Show the selected tab content 
     $(selected_tab).fadeIn(); 

     // At the end, we add return false so that the click on the link is not executed 
     return false; 
    }); 
}); 

Answer 1

如果你不想使用外部庫，你可以使用它。 向鏈接添加標識符並添加單擊事件並在首選選項卡上模擬點擊。 這樣做是不實際的。 但也僅僅是如果你不想使用庫

<a id="simulate">Take me to Tab 2</a> 

看看這個例子的一個選項。

http://codepen.io/anon/pen/hEpGK

Answer 2

您將需要使用Javascript並利用tabs API。

HTML：

<a href="#" class="show_tab_2">Take me to Tab 2</a> 

的Javascript：

$("a.show_tap_2").click(function() { 
    $('#mtabs_wrapper').tabs({ 
    active: 2 
    }); 
}); 

Answer 3

試試這個 如果你有

<a id="goTab2" href="">Take me to Tab 2</a> 

在jQuery的你可以這樣做

$("#goTab2").click(function(){ 
$("#mtabs li:nth-child(2)").click(); 
return false; 
}); 

Answer 4

你想發送的網址與哈希一個鏈接，它顯示標籤？

像 - http://jsbin.com/mawevuwi/1#tab4

爲此，我們會做這樣的事情：

CSS：

.tabs > div { display:none; } 
.tabs > div.active { display:block; } 

設置您HTML /（使用<li>的，如果那是什麼你更喜歡）

<!-- links --> 
<a href="#tab1">Tab1</a> 
<a href="#tab2">Tab2</a> 
<a href="#tab3">Tab3</a> 
<a href="#tab4">Tab4</a> 

<!-- content --> 
<div class="tabs"> 
    <div id="tab1"> Tab one content </div> 
    <div id="tab2"> Tab Two content </div> 
    <div id="tab3"> 
     Tab Three content with a <a href="#tab1">link to tab 1</a> 
    </div> 
    <div id="tab4"> Tab Four content </div> 
</div> 

使用jQuery

var $tabs = $('.tabs > div'), _currhash, $currTab; 

function showTab() { 
    if($currTab.length>0) { 
    $tabs.removeClass('active'); 
    $currTab.addClass('active'); 
    } 
} 
/* find the tabs and 'unlink' the id to prevent page jump */ 
$tabs.each(function() { 
    var _id = $(this).attr('id'); 
    $(this).attr('id',_id+'_tab'); 
    /* eg we have given the tab an id of 'tab1_tab' */ 
}); 

/* set up an anchor 'watch' for the panels */ 
function anchorWatch() { 
    if(document.location.hash.length>0) { 
    /* only run if 'hash' has changed */ 
    if(_currhash!==document.location.hash) { 
     _currhash = document.location.hash; 
     /* we only want to match the 'unlinked' id's */ 
     $currTab = $(_currhash+'_tab'); 
     showTab(); 
    } 
    } 
} 
setInterval(anchorWatch,300); 

---

• 我們可以有很好的URL /somepage#tab1，可以把這些URL作爲電子郵件等聯繫..
• HTML是 '作爲設計的'（命名錨內容ID）
• 使用類來執行/ show/hide，因此如果我們喜歡，我們可以在.active類上設置CSS動畫。

---

http://jsbin.com/dowemeve/1/edit