jquery 选项卡，根据 URL 可见

Question

我使用基于 http://www.jquery 和选项卡。 sohtanaka.com/web-design/simple-tabs-w-css-jquery/

<script type="text/javascript">
    $(function() {
        $(".tab_content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(".tab_content:first").show(); //Show first tab content

        //On Click Event
        $("ul#menu li").click(function() {
        $("ul#menu li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
        });
    });
</script>

是否可以对此进行调整，以便根据 URL 中的值（page.html#tab4 等），相应的选项卡将展示？

我相信在当前状态下它不起作用，因为它返回 false，并且

var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content

正在寻找锚点值，而不是 URL。

希望这是有道理的。

我（认为）如果可以修复，我需要一种从 URL 以及基于单击的锚点获取 #tab 的方法。

谢谢

Answer 1

您可以使用 window.location.hash 检索 URL 的 #something 部分。请参阅：https://developer.mozilla.org/en/window.location

---

另外，您发布的代码...可能是在 jQuery 中不要做的事情的一个很好的列表。让我们为您修复它：

$(function() {
    var tabContent = $(".tab_content");
    // Modified tutorial's code for this
    var tabs = $("#menu li");
    var hash = window.location.hash;

    tabContent.not(hash).hide();
    tabs.find('[href=' + hash + ']').addClass('active');

    tabs.click(function() {
        $(this).addClass('active').siblings().removeClass('active');
        tabContent.hide();
        var activeTab = $(this).find("a").attr("href");

        $(activeTab).fadeIn();
        return false;
    });
});

Answer 2

您想在页面加载时显示选项卡吗？

 $(function() {
      $("ul#menu li").removeClass("active"); //Remove any "active" class  
      $(".tab_content").hide(); //Hide all tab content  

      // set the active class on the tab where the href ends with #tabN
      $("ul#menu li a[href$='" + window.location.hash + "]").closest("li").addClass("active");
      // use the #tabN part of the url as the id selector to show the content
      $(window.location.hash).fadeIn();
 });

另外，在 onclick 处理程序中，您可能需要替换该行

    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 

以

    var activeTab = $(this).find("a")[0].hash; //Find the rel attribute value to identify the active tab + content 

获取 href 的 #tabN 部分。

Answer 3

是的，尝试：

$('a[href="'+activeTab'"]').fadeIn();