與錨鏈接打開選項卡

我有一些典型的標籤內容，我真的需要一些幫助。我想要實現的是，當用戶試圖通過外部錨鏈接（http://www.url.com#content2）到達特定選項卡時，導航鏈接將激活並顯示正確的選項卡。與錨鏈接打開選項卡

謝謝你的幫助。

HTML

<nav class="inner-nav"> 
    <ul> 
     <li><a href="#content1">Inner nav navigation link1</a></li> 
     <li><a href="#content2">Inner nav navigation link2</a></li> 
     <li><a href="#content3">Inner nav navigation link3</a></li> 
    </ul> 
</nav> 

<section class="tab-content" id="content1"> 
    <article> 
     content1 goes here 
    </article> 
</section> 

<section class="tab-content" id="content2"> 
    <article> 
     content2 goes here 
    </article> 
</section> 

<section class="tab-content" id="content3"> 
    <article> 
     content3 goes here 
    </article> 
</section>

JAVASCRIPT

$(document).ready(function() { 
     $(".tab-content").hide(); 
    $(".tab-content:first").show(); 
    $(".inner-nav li:first").addClass("active"); 

    $(".inner-nav a").click(function(){ 
     $(".inner-nav li").removeClass("active"); 
     $(this).parent().addClass("active"); 
     var currentTab = $(this).attr("href"); 
     $(".tab-content").hide(); 
     $(currentTab).show(); 
     return false; 
    }); 
});

我有一個活生生的例子here 所以，如果你點擊導航，一切工作正常，但如果你想要去一個特定的標籤kajag.com/themes/book_your_travel/location.html#sports_and_nature正確的選項卡無法打開。

來源

2013-03-28 Ajak Glisic

你得到任何錯誤？ – bipen 2013-03-28 09:47:01

什麼似乎是問題，在[** FIDDLE **]（http://jsfiddle.net/hBKuu/）中正常工作？ – adeneo 2013-03-28 09:51:06

不，這個javascript工作得很好，如果用戶點擊導航鏈接。但是，如果用戶嘗試通過外部錨鏈接打開特定選項卡，則.js不起作用。 – 2013-03-28 09:52:21

你可以僅僅通過檢查散列頁面加載時解決這個問題，然後觸發正確的選項卡上單擊，就像這樣：

$(function() { 
    $(".tab-content").hide().first().show(); 
    $(".inner-nav li:first").addClass("active"); 

    $(".inner-nav a").on('click', function (e) { 
     e.preventDefault(); 
     $(this).closest('li').addClass("active").siblings().removeClass("active"); 
     $($(this).attr('href')).show().siblings('.tab-content').hide(); 
    }); 

    var hash = $.trim(window.location.hash); 

    if (hash) $('.inner-nav a[href$="'+hash+'"]').trigger('click'); 

});

來源

2013-03-28 10:06:54 adeneo

就是這樣。非常感謝你！ – 2013-03-28 10:12:14

我剛剛完成類似的東西在這裏（披露，我的網站）：http://kronia.com.au/#showcase

既然你不能直接使用散列（即頁面不應該滾動到一個div，應該隱藏/顯示一個取決於值的選項卡），您需要首先檢查一個散列值（鏈接中可能沒有散列值）。

if (window.location.hash){ 
    someFunction(); 
}

然後根據哈希的值顯示/隱藏選項卡。如果你正在執行一些轉換，那麼定義一個'從'和'到'選項卡，否則就是應該顯示的選項卡。例如：

function someFunction(_to, _from){ 
    _to.removeClass('kr-dormant').addClass('kr-next'); 
    _from.removeClass('kr-current').addClass('kr-dormant'); 
    _to.removeClass('kr-next').addClass('kr-current'); 
}

來源

2013-03-28 10:02:09

謝謝。雖然我不確定這是否是我的最佳解決方案。 – 2013-03-28 10:10:01

這是完全相同的行爲，你將有如果你使用JQuery UI Tabs部件

參見這些例子：

爲默認標籤：https://jqueryui.com/resources/demos/tabs/default.html
要第二個選項卡：https://jqueryui.com/resources/demos/tabs/default.html#tabs-2
要第三個選項卡：實行https://jqueryui.com/resources/demos/tabs/default.html#tabs-3

的示例代碼：

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Tabs - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script> 
    $(function() { 
    $("#tabs").tabs(); 
    }); 
    </script> 
</head> 
<body> 

<div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">Nunc tincidunt</a></li> 
    <li><a href="#tabs-2">Proin dolor</a></li> 
    <li><a href="#tabs-3">Aenean lacinia</a></li> 
    </ul> 
    <div id="tabs-1"> 
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 
    </div> 
    <div id="tabs-2"> 
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> 
    </div> 
    <div id="tabs-3"> 
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> 
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> 
    </div> 
</div> 


</body> 
</html>

來源

2016-03-22 13:28:53

與錨鏈接打開選項卡

回答

相關問題