Question

使用基于http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/

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

是否可以根据网址（page.html＃tab4等）中的值进行调整，以显示相应的标签？

我相信它的当前状态不起作用，因为它返回false，而

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

正在寻找一个锚点值，而不是网址。

希望这是有道理的。

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

由于

Answer 1

您可以使用window.location.hash来检索网址的#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();

jquery选项卡，基于URL可见

3 个答案: