我需要更改链接而不更改页面答案

【问题标题】：I need to change links without changing page我需要更改链接而不更改页面
【发布时间】：2013-07-21 16:03:13
【问题描述】：

我有一个使用 Jquery 的网站，所以当我点击菜单“联系人”时，它会打开一个联系人页面，但链接仍然相同，当我点击联系人时，我想更改为“index.html#contact”菜单，如果有人复制链接 index.html#contact，它会自动打开联系页面。
就是这样:)提前谢谢！

HTML：

<div class="mainbox">
    <div class="main">
        <a><div class="menu" id="menu1">
            <div class="menuimg" id="menuimg1"></div>
            <div class="menutxt" id="menutxt1">Menu1</div>
        </div></a>

        <a><div class="menu" id="menu2">
            <div class="menuimg" id="menuimg2"></div>
            <div class="menutxt" id="menutxt2">Menu2</div>
        </div></a>
    </div>
</div>

jQuery :

$('#menu1').click(function(){
    if($('.container2').is(':visible')){
        $('.container2').hide();
        $('.container1').show();
    });
$('#menu2').click(function(){
    if($('.container1').is(':visible')){
        $('.container1').hide();
        $('.container2').show();
    });

【问题讨论】：

请向我们展示您的菜单代码。

标签： jquery hyperlink

【解决方案1】：

如果您想尝试一下，这里有一个简单的想法。我的示例提供了在使用 window.location.hash 准备好的文档上检索 url 哈希（如果有的话），并加载选项卡。我还提供了一个简单的选项卡结构，您可以使用它，以及一个单击事件处理程序。

<!doctype html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>
            //Check for hash in the url
            $(document).ready(function(){
                //Retrieve the hash using
                //window.location.hash
                var hash = window.location.hash;
                //Check if the hash is set.
                if( hash )
                    //Ifso, load the tab.
                    loadTab(hash);
            });

            //Click event handler for menu
            $(document).on("click", ".tab", function(e){
                //Prevent the default action
                e.preventDefault();
                //Set the target to this elements href
                var target = $(this).attr("href");
                //Load the tab
                loadTab(target);
            });

            //Load the tab
            function loadTab(target)
            {
                //Check if the target does exist:
                if($(target).length > 0) {
                    //Hide the other tab pages
                    $(".tab-page").hide();
                    //Show this one.
                    $(target).show();
                }
            }
        </script>
        <style>
            .tab-page{ display:none; }
            .default{ display:block; }
        </style>
    </head>
    <body>
        <a class="tab" href="#home">Home</a> | <a class="tab" href="#contact">Contact Us</a>
        <div>
            <div class="tab-page default" id="home">
                Hello, this is the <b>Home</b> page.
            </div>
            <div class="tab-page" id="contact">
                Hello, this is the <b>Contact</b> page!
            </div>
        </div>
    </body>
</html>

希望有帮助！

【讨论】：