使用头文件时更改选定的链接

Question

我正在为我的侧边菜单html使用头文件。当然，我有多个页面，有时会选择这些页面，当它们出现时，类会更改为具有背景颜色的选定类。我正在实现purecss.io的副菜单和博客。有没有办法在使用一个头文件的同时让所选菜单项改变类/颜色？

我基本上想根据我所在的页面更改“纯菜单选择”类

<ul>
    <li><a href="newest.php">Newest</a></li>
    <li><a href="trending.php">Trending</a></li>
    <li><a href="following.php" >Following</a></li>
    <li><a href="followers.php">Followers</a></li>
    <li><a href="javascript:create()">Create</a></li>
    <li><a href="search.php">Explore</a></li>
    <li class="pure-menu-selected"><a href="home.php">Feed</a></li>
    <li><a href="search-user.php">Search</a></li>
    <li class="menu-item-divided"><a href="profile.php"><?php echo "$firstname";?></a></li>
    <li><a href="settings.php">Settings</a></li>
    <li><a href="account.php">Account</a></li>
    <li><a href="logout.php">Log Out</a></li>
</ul>

Answer 1

添加到你的li是这样的标签:(例如饲料）

<li data-id="feed" class="pure-menu-selected"><a href="home.php">Feed</a></li>

在你的css：

.pure-menu-selected[data-id=feed] {
  background-color: #123456;
}

Answer 2

主要想法是检查您的请求网址是否与您预期的标记菜单项一样

<?php
$url = $_SERVER['REQUEST_URI'];
$selected = 'class="pure-menu-selected"';
>?
<ul>
    <li <?php echo (strpos($url, 'newest.php') !== false) ? $selected : '' ?>><a href="newest.php">Newest</a></li>
    <li <?php echo (strpos($url, 'trending.php') !== false) ? $selected : '' ?>><a href="trending.php">Trending</a></li>
    <li <?php echo (strpos($url, 'following.php') !== false) ? $selected : '' ?>><a href="following.php" >Following</a></li>
    <li <?php echo (strpos($url, 'followers.php') !== false) ? $selected : '' ?>><a href="followers.php">Followers</a></li>
    <li><a href="javascript:create()">Create</a></li>
    <li <?php echo (strpos($url, 'search.php') !== false) ? $selected : '' ?>><a href="search.php">Explore</a></li>
    <li <?php echo (strpos($url, 'home.php') !== false) ? $selected : '' ?>><a href="home.php">Feed</a></li>
    <li <?php echo (strpos($url, 'search-user.php') !== false) ? $selected : '' ?>><a href="search-user.php">Search</a></li>
    <li <?php echo (strpos($url, 'profile.php') !== false) ? $selected : '' ?>><a href="profile.php"><?php echo "$firstname";?></a></li>
    <li <?php echo (strpos($url, 'settings.php') !== false) ? $selected : '' ?>><a href="settings.php">Settings</a></li>
    <li <?php echo (strpos($url, 'account.php') !== false) ? $selected : '' ?>><a href="account.php">Account</a></li>
    <li <?php echo (strpos($url, 'logout.php') !== false) ? $selected : '' ?>><a href="logout.php">Log Out</a></li>
</ul>

Answer 3

<script>
$(document).ready(function(){
$('ul li').click(function(){
    $('ul li').removeClass('pure-menu-selected');
    $(this).addClass('pure-menu-selected');
   });
});
</script>

JsFiddle：http://jsfiddle.net/QCH3q/1/