Question

我有一个使用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();
    });

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

希望有所帮助！

我需要在不更改页面的情况下更改链接

1 个答案: