Question

我用php写了我的网站。我有索引文件从页面文件夹动态加载我的页面。我也将导航菜单放在一个单独的文件中。

所以我试图在点击时突出显示文本颜色，因为我无法使windowlocation工作。由于我设置它的方式，windowlocation返回带有javascript或jquery的/index.php。所以我试着通过定位链接来保持简单。

    <nav>
    <ul>
    <li><a href="index.php?p=home" class="selected">Home</a></li>
    <li><a href="index.php?p=skills">Skills</a></li>
    <li><a href="index.php?p=about">About</a></li>
    <li><a href="index.php?p=contact">Contact</a></li>
    </ul>
    </nav>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--Script to add selected class to highlight active link-->    
<script>
    $(document).ready(function(){
        $("ul li a").click(function(){
        $("ul li a").removeClass('selected');  
        $("ul li a").addClass('selected');
        });
    });
</script>

我的css设置如下：

a.selected{color:#0066ff;}

我已经尝试在我创建的每个php文件中抛出此代码。仍然没有任何作用当我想要一个警告框在单击链接时弹出一条消息时，它可以正常工作。为什么这不起作用？运行代码时没有任何变化......有什么建议吗？

Answer 1

如果您通过点击每个链接重新加载页面，请尝试

<nav>
<ul>
<li><a href="index.php?p=home" <?php (empty($_GET['p']) || $_GET['p'] == 'home') ? echo 'class="selected"' : ''?> >Home</a></li>
<li><a href="index.php?p=skills" <?php $_GET['p'] == 'skills' ? echo 'class="selected"' : ''?>>Skills</a></li>
<li><a href="index.php?p=about" <?php $_GET['p'] == 'about' ? echo 'class="selected"' : ''?>>About</a></li>
<li><a href="index.php?p=contact" <?php $_GET['p'] == 'contact' ? echo 'class="selected"' : ''?> >Contact</a></li>
</ul>
</nav>

虽然你不需要jQuery功能如果您不想重新加载页面，请在jQuery中尝试：

$(document).ready(function(){
    $("ul li a").click(function(){
       $("ul li a").removeClass('selected');  
       $(this).addClass('selected');
       return false;
    });
});

Answer 2

您需要在单击的li元素中添加所选的类。

尝试这样：

 $(document).ready(function(){
        $("ul li a").click(function(){
        $(".selected").removeClass('selected');  
        $(this).addClass('selected');
        });
    });

实际上，当您点击li元素时，您正在重定向。所以jquery不会在这种情况下工作。如果您使用一个页面重新加载的页面应用程序，它将工作。你可以通过php这样做：

// index.php

<?php

   $page = isset($_REQUEST['p']) ? $_REQUEST['p'] : '';

switch($page) {
case 'skills' :
  echo ' <ul>
        <li><a href="index.php?p=home">Home</a></li>
        <li><a href="index.php?p=skills"  class="selected">Skills</a></li>
        <li><a href="index.php?p=about">About</a></li>
        <li><a href="index.php?p=contact">Contact</a></li>
     </ul>';
   break;

case 'about' :
  echo ' <ul>
        <li><a href="index.php?p=home" >Home</a></li>
        <li><a href="index.php?p=skills">Skills</a></li>
        <li><a href="index.php?p=about"  class="selected">About</a></li>
        <li><a href="index.php?p=contact">Contact</a></li>
     </ul>';
   break;

case 'contact' :
  echo ' <ul>
        <li><a href="index.php?p=home" >Home</a></li>
        <li><a href="index.php?p=skills">Skills</a></li>
        <li><a href="index.php?p=about">About</a></li>
        <li><a href="index.php?p=contact"  class="selected">Contact</a></li>
     </ul>';
   break;

default: 
 echo ' <ul>
        <li><a href="index.php?p=home" class="selected">Home</a></li>
        <li><a href="index.php?p=skills">Skills</a></li>
        <li><a href="index.php?p=about">About</a></li>
        <li><a href="index.php?p=contact">Contact</a></li>
     </ul>';


}

Answer 3

$('#menu li a').on('click', function(){
   $('li a.current').removeClass('current');
   $(this).addClass('current');
});

Jquery没有为我的导航菜单添加或删除我选择的类

3 个答案: