鏈接之間突出顯示和切換 - 如何設置默認類

美好的一天，每個人！鏈接之間突出顯示和切換 - 如何設置默認類

我有這段代碼，我試圖去工作。我一直在尋找這個論壇，來得相當接近，但可以得到它。

我想切換鏈接以突出顯示當前鏈接。

這已經在這裏討論過了，但我似乎無法找到與我的問題相匹配的解決方案。

我設法讓鏈接切換，添加類和刪除類。

我很困惑的是如何分配一個默認類。

含義我想給鏈接一個默認樣式，然後用add/remove類切換覆蓋它。

目前鏈接的默認樣式不是，如果我直接使用CSS樣式，那麼腳本不起作用。這是因爲我找不到一種方法來刪除這種風格。

代碼：

$(document).ready(function() { 
$("#test a").click(function() { 
     $(".normal").removeClass("normal"); 
     $(this).toggleClass('normal'); 
    }); 
});

的HTML：

<div id="test"> 
<a href="#">Testing</a> 
<a href="#">Testing</a> 
<a href="#">Testing</a> 
</div>

解決方案：爲了使這項工作，我只是放在我想覆蓋風格CSS重要聲明！由於默認樣式直接放置在選擇器上，因此不允許任何其他樣式接管。意思是，如果你將兩種風格應用於一個元素，直接風格就會受到指責。

CSS

.active{/*SETS THE ACTIVE STYLE*/ 
    color: #333 !important; 
    text-decoration: none; 
    font-size: 16px; 
} 

#test a{ /*SETS THE DEFAULT STYLE*/ 
    color: #666; 
    text-decoration: none; 
    font-size: 16px; 
}

jQuery的：

$(document).ready(function() { 
$("#test a").click(function() { 
     $(".normal").removeClass("active"); 
     $(this).toggleClass('active'); 
    }); 
});

的HTML：

<div id="test"> 
    <a href="#">Testing</a> 
    <a href="#">Testing</a> 
    <a href="#">Testing</a> 
    </div>

來源

2011-05-29 Overmars

只是普通的舊的CSS :)

<a href="#" class="foo">Testing</a>

做

這將給每個人一個默認的類。

編輯只是重讀你的問題，仍然使用CSS，然後如果你這樣做：

$("a").removeClass();

應該刪除所有類。

來源

2011-05-29 08:11:56 jefffan24

我嘗試過，但因爲該類直接應用於html元素，我無法切換類。基本上我需要的是當點擊一個鏈接來突出顯示單個活動鏈接時，將默認設置刪除。鏈接不會在任何地方。 – Overmars 2011-05-29 08:13:59

剛剛編輯我的答案，請再讀一遍:) – jefffan24 2011-05-29 08:14:33

再次感謝 - 如果您查看代碼，頁面以正常樣式加載，我的樣式直接在元素上。所以切換不起作用。即使是刪除類。我能夠實現它的唯一方法就是如果我沒有直接關注元素的風格。 – Overmars 2011-05-29 08:17:36

鏈接之間突出顯示和切換 - 如何設置默認類

回答

相關問題