jQuery选项卡从URL访问 [英] jquery tabs access from urls

问题描述

您好，我有jquery选项卡，想使用#从url访问它们，但知道如何完全填充

hello i have jquery tabs and want to access them from url using # but know know how can I full fill with it

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

requirement is mywebsite.com/#show_page1 will show the page 1 content and if access from mywebsite.com/#show_page2 will show the page 2 content

这是我的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>

推荐答案

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

location.hash; will give you the hash value added in the addressbar and you can use it the way you need to. My suggestion is added below.

在我看来，您想突出显示位于浏览器地址栏中的哈希值和要显示的相应div的链接.如果这是您要实现的，则可以对标记和js稍作更改即可尝试:

What seems to me you want to hightlight your link with the hash located in the browser's addressbar and respective div you want to show. If this is what you want to implement then you can try this with slight changes in the markup and js:

.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();
    });
});

这篇关于jQuery选项卡从URL访问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！