活動鏈接變成不同的顏色
[英]Active link turn different color
問題描述
我正在嘗試鏈接這三個腳本，以便活動鏈接變為另一種紫色。 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 個解決方案
解決方案1
2 已采納
試試這個代碼
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');
}
});
});
解決方案2
1 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");
});
如果您所做的編輯不完全正確（如我在手機上一樣），這可能對您有用，很抱歉。
解決方案3
0 2016-06-27 04:10:29
單擊鏈接后，您的單擊處理程序將運行以更改當前頁面中被單擊項目的類（並因此更改其顏色），但隨后將發生常規頁面導航並加載指定的頁面，從而覆蓋已應用於該頁面的更改。前一頁。
您可以在頁面加載時運行一些代碼以從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處的元素為頁面名稱。
活動鏈接未更改顏色
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.