我使用 .addclass 在选择选项卡时使用CSS类，并且还将类添加到 parent parent 选项卡中。正在添加该类，但 CSS 似乎并未影响父类的父类(如果这听起来很尴尬，我们深表歉意)。
CSS:
.selectedTab{
color:#234 !important;
background-color:white !important;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Visit Northern Ireland</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="js/common.js"></script>
<script src="js/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/accordion.css">
<link rel="stylesheet" type="text/css" href="css/armagh.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
<div id="centeredPane">
<nav>
<ul id="css-tabs">
<li><a href="#" class="contentLinks selectedTab" name="home">Home</a></li>
<li><a href="#" name="activities">Activities</a>
<div class="subnav" id="activitiesLink">
<a href="#" name="armagh" class="contentLinks">Co. Armagh</a>
<a href="#" name="antrim" class="contentLinks">Co. Antrim</a>
<a href="#" name="down" class="contentLinks">Co. Down</a>
<a href="#" name="fermanagh" class="contentLinks">Co. Fermanagh</a>
<a href="#" name="londonderry" class="contentLinks">Co. Londonderry</a>
<a href="#" name="tryone" class="contentLinks">Co. Tyrone</a>
</div>
</li>
<li><a href="#" name="restaurants">Restaurants</a>
<div class="subnav" id="restaurantLink">
<a href="#" name="indian" class="contentLinks">Indian</a>
<a href="#" name="tapas" class="contentLinks">Tapas</a>
<a href="#" name="american" class="contentLinks">American</a>
<a href="#" name="italian" class="contentLinks">Italian</a>
</div>
</li>
<li><a href="#" class="contentLinks" name="game">Game</a></li>
</ul>
</nav>
<div class="content" id="home">home</div>
<div class="content" id="armagh">armagh</div>
<div class="content" id="antrim">antrim</div>
<div class="content" id="down">down</div>
<div class="content" id="fermanagh">fermanagh</div>
<div class="content" id="londonderry">londonderry</div>
<div class="content" id="tryone">tyrone</div>
<div class="content" id="indian">indian</div>
<div class="content" id="tapas">tapas</div>
<div class="content" id="american">american</div>
<div class="content" id="italian">italian</div>
<div class="content" id="game">game</div>
<footer>For more information visit <a href="http://www.discovernorthernireland.com/" target="_blank">Discover Northern Ireland</a></footer>
</div>
</body>
</html>
jQuery:
$('.contentLinks').click(function() {
$(this).addClass("selectedTab");
$('a').not(this).removeClass("selectedTab");
//var is_element_li = $(this).parent().parent().get(0).tagName.is("li");
var is_element_li = $(this).parent().parent().is("li");
if(is_element_li){
$(this).parent().parent().addClass("selectedTab");
}
var nameAttribute = $(this).attr('name');
nameAttribute = "#"+ nameAttribute;
$(nameAttribute).show();
$('div.content').not(nameAttribute).hide();
});
如何获取要应用的样式？
最佳答案
您需要将 selectedTab 类添加到 anchor 元素，而不是 li 元素:
$(this).parent().parent().children("a").addClass("selectedTab");
关于javascript - jQuery - 正在应用但未生效的 CSS 类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14948044/