1

タブが選択されているときにCSSクラスを適用.addClassし、親の親タブにもクラスを追加しています。クラスは追加されていますが、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();
});

どうすればスタイルを適用できますか？

4

1 に答える 1

2

selectedTab要素ではなく、アンカー要素にクラスを追加する必要がありますli。

$(this).parent().parent().children("a").addClass("selectedTab");
于 2013-02-19T01:02:12.460 に答える