Question

你好我有jquery选项卡，想要使用＃从url访问它们但是知道我怎么能完全填充它

要求是mywebsite.com/#show_page1将显示第1页内容如果从mywebsite.com/#show_page2访问将显示第2页内容

这是我的js代码

$(window).load(function(){
    $(document).ready(function(){
    $("#nav_tabbed a").click(function(){ 
        var id =  $(this).attr('id');
        id = id.split('_');
         $("#menu_container div").hide(); 
        $("#menu_container #show_"+id[1]).fadeIn();
                    // remove classes from all
        $("a").removeAttr("style");
        // add class to the one we clicked
        $(this).css("background-color","#1aaede");
        // stop the page from jumping to the top
        return false;

    });
    $("#menu_container #show_page1").show();
    });
});

和html我有

<div id="nav_tabbed">
                    <a id="show_page1" style="background-color:#1aaede;">Page 1</a> <a id="show_page2">Page 2</a>
               </div>

               <div id="menu_container">
                    <div id="show_page1">
                     <!-- content here -->
                    </div>

                    <div id="show_page2">
                      <!-- content here -->
                    </div>
               </div>

Answer 1

location.hash;会为您提供地址栏中添加的哈希值，您可以按照需要使用它。我的建议在下面添加。

在我看来，您希望使用位于浏览器地址栏中的哈希以及您要显示的相应div来高亮显示您的链接。如果这是您想要实现的，那么您可以尝试使用标记和js：

稍作更改

CSS：

.active {
    color:red;
}
#menu_container div {
    display:none;
}

HTML：

<div id="nav_tabbed"> 
    <a href="#show_page1" class='active'>Page 1</a> <!--This lets you add hash in the addressbar--> 
    <a href="#show_page2">Page 2</a>
</div>
<div id="menu_container">
    <div id="show_page1" style='display:block;'>Page 1</div>
    <div id="show_page2">Page 2</div>
</div>

JS：

$(function () {
    // below works for hash added in the browser.
    var hash = location.hash;
    if(hash.length){
        $('#nav_tabbed a').removeClass('active');
        $('#menu_container div').hide();
        $('#nav_tabbed a[href*="' + hash + '"]').addClass('active');
        $('#menu_container div[id*="' + hash.slice(1) + '"]').show();
    }
    $(document).scrollTop(0);
    // below works for click of the anchors
    $('#nav_tabbed a').click(function(e){
        e.preventDefault();
        $(this).addClass('active').siblings('a').removeClass('active');
        $('#menu_container div').hide();
        $('#menu_container div[id*="'+this.getAttribute('href').slice(1)+'"]').show();
    });
});

A sample fiddle.

Answer 2

您的帖子对该主题有点混淆。首先要解释一下：＃有两个含义＃在url中，＃是对位置哈希的引用。在jquery中，＃是对元素id的引用。

你想在这种情况下使用散列更改。

首先......你为什么要围绕dom.ready事件包装window.load？到目前为止，正如我所知，当dom准备就绪时，jquery的dom准备就绪，jquerys window.load会在所有图像，iframe，插件等已经加载后触发。所以在窗户里面有一个dom.ready是不必要的......

下一个：ID必须是唯一的 - 你不能给你的锚一个与指定div相同的id！

所以让我们开始做生意 - html：

<div id="nav_tabbed"> 
    <a href="#page1" class="activeLink">Page 1</a>  
    <a href="#page2">Page 2</a>
</div>
<div id="menuContainer">
    <div id="page1" class="contentTab activeTab">123</div>
    <div id="page2" class="contentTab">456</div>
</div>

我们使用activeLink和activeTab类来确定当前打开的选项卡

css只设置activeLink的背景：

.activeLink {
   background-color:#1aaede;
}

js：

$(window).load(function(){
  $(".contentTab:gt(0)").hide(); //on initial load, we hide all content tabs, despite the first one

  $("#nav_tabbed a").click(function () { //the click handler for the navigation only toggles the class to change the background color
    $(".activeLink").removeClass("activeLink");
    $(this).addClass("activeLink");
  })

  if(location.hash) //here we check, if there already is a location hash set onload and then change to the desired tab
  {
    $(".activeTab").hide();
    $(location.hash).show().addClass("activeTab");
  }

});

//our hashchange event handles the loading of the desired tabs:
window.onhashchange = function () {
  if(location.hash!=null) //this checks, wether the hashchange event has been fired, due to a deletion of the hash via url
  {
    $(".activeTab").hide().removeClass("activeTab"); //hide the current tab
    $(location.hash).show().addClass("activeTab"); //show the clicked tab
  }else //and per default show the first tab
  {
    $(".activeTab").hide().removeClass("activeTab"); //hide the current tab
    $(".contentTab:first").show().addClass("activeTab"); //show the clicked tab
  }
};

http://jsfiddle.net/ex46ndg1/3/

jquery选项卡从URL访问

2 个答案:

CSS：

HTML：

JS：

A sample fiddle.