2013-07-21 65 views
1

我有一个使用Jquery的网站,所以当我点击菜单“联系人”时会打开一个联系人页面,但链接仍然相同,我想更改为“index.html#联系“,当我点击在菜单上的联系人,如果有人复制链接index.html#联系它会自动打开联系页面。
多数民众赞成在此先感谢!我需要更改链接而不更改页面

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

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

+0

'location.hash' –

回答

0

这里有一个如何去了解它,如果你想尝试一下一个简单的想法。我的示例提供了使用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> 

希望有所帮助!