jQuery-CSS类正在应用，但尚未生效

jQuery - CSS class being applied but not taking effect

本文关键字：未生效 应用 jQuery-CSS      更新时间：2023-09-26

当选择了一个选项卡时，我正在使用.addClass应用一个CSS类，它还将该类添加到父级-父级选项卡中。正在添加该类，但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类添加到锚点元素，而不是li元素：

$(this).parent().parent().children("a").addClass("selectedTab");
相关文章：