在“菜单”中为当前页面添加活动类

我已经创建了文件header.php，它调用了所有页面中的页眉部分...现在我想要如果我在页面上..它将应用两个类来在菜单中的给定按钮...我试图这样做，但它不能正常工作......请指导我该怎么办....在“菜单”中为当前页面添加活动类

<?php 
session_start(); 
?> 

<script type="text/javascript"> 
var path = window.location.pathname.split('/'); 
path = path[path.length-1]; 

if (path !== undefined) { 
    $("#menu") 
     .find("a[href$='" + path + "']") // gets all links that match the href 
     .parents('li') // gets all list items that are ancestors of the link 
     .children('a') // walks down one level from all selected li's 
     .addClass('active'); 
} 
</script> 
<script type="text/javascript"> 
var path = window.location.pathname.split('/'); 
path = path[path.length-1]; 

if (path !== undefined) { 
    $("#menu") 
     .find("a[href$='" + path + "']") // gets all links that match the href 
     .parents('li') // gets all list items that are ancestors of the link 
     .children('a') 
     .children('span') // walks down one level from all selected li's 
     .addClass('curant'); 
} 
</script> 

<div id="header"> 
    <h1><a href="home.php"><img src="images/logo.png" width="184" height="77" alt=""></a></h1> 
    <div class="header_left"> 
    <h2>Customer Relationship <span>Management System</span></h2> 
    <div class="PoweredBy"> 
    <h3> PoweredBy:</h3> 
    <div class="PoweredBy_image"><a href="#"><img src="images/PoweredBy-logo.png" alt=""></a></div> 
    </div> 
    </div> 
<div class="menu" id="menu"> 
<div class="menu_leftbg"></div> 
    <div class="nav"> 
    <ul> 

    <li class="home"><a href="home.php"><span><img src="images/home-page.png" alt=""></span></a></li> 
    <li><a href="all_inquiry.php"><span >All Enquiry</span></a></li> 
    <li><a href="booking.php"><span >Book Now</span></a></li> 
    <li><a href="all_booking.php"><span >All Booking</span></a></li> 
    <li><a href="#"><span >Send SMS</span></a></li> 
    </ul> 

    <div class="right_nav"> 
    <h3>Welcome! <?php if(loggedin()){?><span><?php echo $_SESSION['username']; echo $_COOKIE['username']; }?></span></h3> 
<?php if(loggedin()){ ?> <h2><a href="logout.php">Log Out</a></h2><?php } ?> 
    </div> 
    </div> 
    <div class="menu_rightbg"></div> 
</div> 
</div>

来源

2013-03-20 user2182602

不正常......怎么样？标记错误的元素？吹起你的布局？踢你的狗？侮辱你的母亲？ – 2013-03-20 06:33:34

您需要在dom准备好运行脚本。

$(function(){ 
    var split = window.location.pathname.split('/'); 
    var mnurl = split[split.length-1]; 
    $('#menu a[href="' + mnurl + '"]').addClass("menu-selected").children('span').addClass("curant"); 
})

演示：Fiddle

来源

2013-03-20 06:44:42

谢谢你...这段代码工作完美.. – user2182602 2013-03-20 08:13:34

干草我想要另一个班级适用于我给标签的范围......我已经写了这个..但它没有考虑到跨度... $（'＃menu a [href =''+ mnurl +'“]'）。addClass（”active“）; $（'＃menu a span [href =“'+ mnurl +'”]'）。addClass（“curant”）; – user2182602 2013-03-20 08:31:09

哪些类必须被添加到跨度 – 2013-03-20 08:32:22

试试这个：

的Javascript：

$(function() { 
    var mnurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1); 

    $("ul.menu").each(function() { 
     if ($(this).attr("href") == mnurl) $(this).addClass("menu-selected"); 
    }) 
});

css：

.menu-selected{ color: #ccc !important;}

来源

2013-03-20 06:36:07

在“菜单”中为当前页面添加活动类

回答

相关问题