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");。那你怎么做的呢？这是一种方式：

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

这使用正则表达式，假设您的网址结构在以下方面有所不同：

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 个答案: