开发者

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>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜