活动链接变成不同的颜色

Question

我正在尝试链接这三个脚本，以便活动链接变为另一种紫色。 jquery.js包含下载的jquery库。 我不知道为什么它不能按预期工作。 任何人？

<link href="site.css" rel="stylesheet">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="color.js"></script>

</head>

<body>


<div class="nav-container" >
<ul class="navigation-menu" >
  <li><a href='start.php'>Home</a></li>
  <li><a href='pay.php'>C2B Payments</a> </li>
  <li><a href='sms.php'>C2B SMS</a></li>
  <li><a href='#'>B2C Payments</a>
    <ul>
      <li><a href="getbtc.php"> B2C Payments</a></li>
      <li><a href="payment.php"> Make Payments</a></li>
    </ul>
  </li>

  <li><a href='bsms.php'>B2C SMS</a></li>
  <li><a href='index.php'>Log Out</a></li>
</ul>

//JS color.js
$(document).ready(function(){
  $('ul li a').click(function(){
    $('li a').removeClass("active");
    $(this).addClass("active");
});
});

 //css site.css
.navigation-menu li a.active {
  background-color: purple;
  color:#fff;
  }

Answer 1

试试这个代码

HTML

<ul class="navigation-menu" >
  <li class="active"><a href='#'>Home</a></li>
  <li><a href='#'>C2B Payments</a> </li>
  <li><a href='#'>C2B SMS</a></li>
  <li><a href='#'>B2C Payments</a>
    <ul>
      <li><a href="#"> B2C Payments</a></li>
      <li><a href="#"> Make Payments</a></li>
    </ul>
  </li>

  <li><a href='#'>B2C SMS</a></li>
  <li><a href='#'>Log Out</a></li>
</ul>

CSS

.active{
  background-color:purple;
}

jQuery的

$(document).ready(function(){

$('li > a').click(function() {
    $('li').removeClass('active').css("background-color", "");

   var $paren = $(this).parent();
        if (!$paren.hasClass('active')) {
            $paren.addClass('active');
        }
});
});

Answer 2

您是否尝试过这个？

.navigation-menu li a:active {
    background-color: purple;
    color:#fff;
}

与其尝试使用JQuery修改CSS类，不如简单地使用CSS来完成所有这些工作。

CSS活动状态定义为

:active

不像

.active

（以防万一，您试图定位状态而不是故意使用类来做到这一点）

编辑：

$(".navigation.menu").click(function(){
    $(".navigation.menu").css("color","#fff");
    $this.css("color","#f0f");
});

如果您所做的编辑不完全正确（如我在手机上一样），这可能对您有用，很抱歉。

Answer 3

单击链接后，您的单击处理程序将运行以更改当前页面中被单击项目的类（并因此更改其颜色），但随后将发生常规页面导航并加载指定的页面，从而覆盖已应用于该页面的更改。前一页。

您可以在页面加载时运行一些代码以从location.href提取页面名称，然后将其用作选择器以在与当前页面相对应的锚点上设置类，而不是使用单击处理程序。

也就是说，如果您能以某种方式判断当前页面为bsms.php那么您可以说$("a['href=bsms.php']).addClass("active"); bsms.php那么您将如何做？这是一种方法：

$(document).ready(function() {
  var currentPage = location.href.match(/\/(\w+\.php)/);
  if (currentPage) {
    $("a[href='" + currentPage[1] + "']").addClass("active");
  }
});

它使用一个正则表达式，假定您的URL结构与以下内容有所不同：

www.somedomainname.com/optional/folders/pagename.php?optionalargs=something

并获得pagename.php部分。

正则表达式匹配如下：

\/         - a forward slash (which has to be escaped in the regex)
(          - beginning of a sub match
\w+        - one or more "word" characters
\.         - a literal .
php        - the literal characters php
)          - end of the sub match

如果没有匹配项，则currentPage变量将为null ，否则它将是一个数组，其中索引1处的元素为页面名称。

活动链接变成不同的颜色

问题描述

3 个解决方案

解决方案1
2 已采纳

解决方案2
1 2016-06-27 04:35:41

解决方案3
0 2016-06-27 04:10:29

活动链接变成不同的颜色

问题描述

3 个解决方案

解决方案1 2 已采纳

解决方案2 1 2016-06-27 04:35:41

解决方案3 0 2016-06-27 04:10:29

解决方案1
2 已采纳

解决方案2
1 2016-06-27 04:35:41

解决方案3
0 2016-06-27 04:10:29