如何在导航栏中显示打开的页面水龙头

Question

我有代码在其中，我想显示打开的页面导航页面的水龙头，我想根据打开的页面突出显示水龙头链接。

但是，现在当点击此链接在此导航栏中，然后页面重新加载并仅显示主页面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> 

谢谢 穆沙拉夫

Answer 1

很显然，你希望有一个水龙头导航。你不需要重新发明轮子。尝试jQuery UI的自来水导航：

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