活动链接转不同颜色
我试图链接这三个脚本，这样一个活动链接就会变成一个不同颜色的紫色。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;
}回答 3
Stack Overflow用户
发布于 2016-06-27 03:39:24
试试这个代码
<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');
}
});
});Stack Overflow用户
发布于 2016-06-27 04:35:41
你试过这个简单吗？
.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");
});这可能对你有用，抱歉，如果这个编辑不是完全正确的，因为我是在我的电话。
Stack Overflow用户
发布于 2016-06-27 04:10:29
单击链接时，单击处理程序将运行以更改当前页中单击项的类(以及颜色)，但随后将发生正常页导航，并加载指定页，覆盖应用于上一页的更改。
与使用单击处理程序不同，您可以在页面加载时运行一些代码，从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");
}
});这使用了一个regex，该正则表达式假定您的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处的元素是页面名。
https://stackoverflow.com/questions/38045413
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号