如何在导航栏中显示打开的页面点击

时间:2012-10-10 06:03:45

标签: jquery html

我有代码,其中,我要显示打开的页面导航页面点击,我想根据页面中的任何一个打开突出显示点击链接。

但是,现在点击此导航栏中的来链接,然后页面重新加载并仅显示UL打开的主页面。

我想执行,当用户点击链接框UL需要显示的某个链接时。以下是我的代码

<div id="sidebar">
<div class="box">
<div class="h_title">&#8250; <b>Home</b></div>
<ul id="home">
<li class="b1"><a class="icon page" href="/portal/">Status</a></li>
</ul>
</div>
<div class="box">
<div class="h_title">&#8250; <b>About Us</b></div>
<ul>
<li class="b1"><a class="icon page" href="">Custom Report</a></li>
<li class="b1"><a class="icon page" href="">History Log</a></li>
<li class="b1"><a class="icon page" href="">Graphs</a></li>
</ul>
</div>
<div class="box">
<div class="h_title">&#8250; <b>PROFILES</b></div>
<ul>
<li class="b1"><a class="icon page" href="">Filters</a></li>
<li class="b1"><a class="icon page" href="">StaffList</a></li>
<li class="b1"><a class="icon page" href="">StudentList</a></li>
</ul>
</div>
<div class="box">
<div class="h_title">&#8250; <b>ADMINISTRATION</b></div>
<ul>
<li class="b1"><a class="icon page" href="">Manage Licenses</a></li>
<li class="b1"><a class="icon page" href="">Change Password</a></li>
</ul>
</div>
</div>

<script type="text/javascript" src="/static/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
   $(function(){
   $(".box .h_title").not(this).next("ul").hide("normal");
   $(".box .h_title").not(this).next("#home").show("normal");
   $(".box").children(".h_title").click( function() { $(this).next("ul").slideToggle(); });
  });
</script>   

谢谢 佩尔韦兹

1 个答案:

答案 0 :(得分:0)

显然你想要一个水龙头导航。你不需要重新发明轮子。试试jquery ui tap导航:

jQuery UI标签 http://jqueryui.com/tabs/