How add active state to my menu with php or jquery or css?
<div id="nav">
<ul>
<li class="item"><a href="">Home</a>/</li>
<li class="item"><a href="two">Tab2</a></li>
<li class="item"><a href="three">Tab3</a></li>
<li class="item"><a href="four">Tab3</a></li>
</ul>
<div>
now, i want to add class='active' to the menu. when the menu is the current page.namely. when i on the home page. the li label is <li class="item" class="active">
the others are <li class="item">
. when i on the Tab2 page. the li label is <li class="item" class="active">
.the others are <li class="item">
PS: IF I want to add the class="active" to a label, like this <li class="item"><a href="" class="active">Home</a>/</li>
. how should i do? according to the He开发者_如何学运维adshota's instruction. i got this, but it's too complicated. is there a simple way to get it with php? thank you.
<?php
$current = array("","two","three","four");
?>
then
<li class="item"><a href="" class="<?php if($GET[$current(0)]=="") echo "active"; ?>">Home</a>/</li>
<li class="item"><a href="two" class="<?php if($GET[$current[1]]=="two") echo "active"; ?>">Tab2</a></li>
<li class="item"><a href="three" class="<?php if($GET[$current[2]]=="three") echo "active"; ?>">Tab3</a></li>
<li class="item"><a href="four" class="<?php if($GET[$current[3]]=="four") echo "active"; ?>">Tab3</a></li>
Try this. This will add class to menu when you click on it:
$('#nav ul li').click(function(){
$(this).parent().find('li.active').removeClass('active');
$(this).addClass('active');
});
in Jquery you can compare link hrefs with part of the url, but it's not a good practice...
you can have url parameter, for example menu_id
which you'll pass on every request. and check on every menu for appropriate value;
<li class="item <?php if($_GET['menu_id']==1){ echo 'active';} ?>">
<a href="blablabla.php?menu_id=1">Home</a>
</li>
<li class="item <?php if($_GET['menu_id']==2){ echo 'active';} ?>">
<a href="blablabla.php?menu_id=2">Tab2</a>
</li>
精彩评论