Question

 <head>
  <link rel="stylesheet" type="text/css" href="main.css">
  </head>
  <body >      
        <?php
                 echo '<ul  id="menu">
                <li><a href= "first.php">first</a></li>
                <li><a href= "second.php">second</a></li>
                <li><a href= "third.php">third</a></li>
                </ul>';
        ?>
  </body>
  </html>

这个list.php是单独的文件。我已经在我的网页中包含了这个，并试图突出显示当前页面点击使用：活动但它无法正常工作..帮我解决这个问题

<div class= "main-menu" id= "main-menu">    
            <?php include 'includes/list.php';?>
</div>

Answer 1

a：活动是您点击链接时的状态。（http://www.w3schools.com/cssref/sel_active.asp）

a：如果您点击之前的链接，则访问状态。（http://www.w3schools.com/cssref/sel_visited.asp）

您可以添加一个类（在此示例中为“当前”）以突出显示当前链接

<li><a href="first.php" class="current">first</a></li>

用css：

.current {
    color: yellow;
}

Answer 2

如果你可以使用jquery，那么你可以使用这个解决方案：

js脚本应该在所有页面中都是通用的，即first.php，second.php等。以下是代码：

<html>
 <head>
  <link rel="stylesheet" type="text/css" href="main.css">
  </head>
  <style>
  .active{ color:yellow; }
  </style>
  <body >      
        <?php
                 echo '<ul  id="menu">
                <li><a href= "first.php">first</a></li>
                <li><a href= "second.php">second</a></li>
                <li><a href= "third.php">third</a></li>
                </ul>';
        ?>


<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script type="text/javascript">
$(document).ready(function() {

    $('ul#menu li a').click(function() {
        $('ul#menu li a').removeClass('active');
        $(this).addClass('active');
    });
});
</script>
 </body>
 </html>

希望，这会对你有帮助。

Answer 3

我找到了你的问题在你的li标签中你应该检查锚标签并检查first.php页面实际存在与否这意味着：href =“../ first.php”这是你的解决方案

但你的代码就像这意味着first.php不存在，这就是css无法正常工作的原因

第一

我希望你明白我实际告诉你的事情

ul＃menu li a：visit {color：yellow;不工作

3 个答案: