活动链接变成不同的颜色 [英] Active link turn different color
本文介绍了活动链接变成不同的颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试链接这三个脚本，以便活动链接变为另一种紫色. jquery.js包含下载的jquery库.我不知道为什么它不能按预期工作.任何人?
I'm trying to link those three scripts so that a active link turns to a different color purple. jquery.js contains the downloaded jquery library. I don't know why it is not working as expected. Anyone?
<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;
}
推荐答案
尝试此代码
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');
}
});
});
这篇关于活动链接变成不同的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
