通过url字符串在无序列表中显示页面

时间:2013-09-03 16:26:54

标签: javascript jquery

我有一个无序列表,为用户进行选择之前未显示的一系列页面提供导航。我想导航到一个特定的页面,并通过url字符串显示它而不需要任何用户交互。

我该怎么做?

这是一个代码示例;

     <!-- Beginning of Show/Hide Functionality -->
        <script>
$(document).ready(function(){

    $("form").hide();

  $("#show").click(function(){
    $("form").show();
$("button").hide();
  });
});
</script>
        <!-- End of Show/Hide Functionality -->
        <!--[if lt IE 7]><script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script>
        <![endif]-->
        <!--[if lt IE 9]><script src="js/html5.js" type="text/javascript"></script>
        <![endif]-->
        <!--[if IE]><link href="css/ie_style.css" rel="stylesheet" type="text/css" /><![endif]-->
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <div id="main">
        <ul class="pags">
            <li class="current"><a href="#" rel="1"></a> </li>
            <li><a href="#" rel="2"></a> </li>
            <li><a href="#" rel="3"></a> </li>
            <li><a href="#" rel="4"></a> </li>
            <li><a href="#" rel="5"></a> </li>
        </ul>
        <!-- header -->
        <header class="hidden">
        <div class="extra-wrap" style="left: 0px; top: 0px; right: 0px; bottom: 0px; position: absolute;">
        <h1><a href="#"><img alt="" src="images/logo.png" /></a></h1>
        <nav>
        <ul>
            <li class="itm1"><a href="#page1"></a> </li>
            <li class="itm2"><a href="#page3"></a> </li>
            <li class="itm3"><a href="#page2"></a> </li>
            <li class="itm4"><a href="#page4"></a> </li>
            <li class="itm5"><a href="#page5"></a> </li>
        </ul>
        </nav>
        <a href="#1" class="shattle"></a></div>
        </header>
        <!-- content -->
        <div class="wrapper">
        {tag_pagecontent}
        </div>
        <strong>
        <!-- footer -->

1 个答案:

答案 0 :(得分:0)

听起来你会想要查看哈希标记。

您的想法是使用window.location.hash(URL中“#”后面的所有内容)进行导航。你需要这样做,当有人点击页面链接时,它会更新该页面的主题标签,并在初始页面加载时这样做,如果有一个主题标签集,那么你需要'导航'到那个页面。

jQuery有一个为此目的而构建的插件:http://benalman.com/projects/jquery-hashchange-plugin/