在活动选项卡中，文本颜色更改为白色

我的问题是当fois选项卡处于活动状态时，其颜色未更改为white.i当任何选项卡处于活动状态时，文本颜色更改为白色，背景更改为橙色。下面是小提琴 http://jsfiddle.net/TfQU8/在活动选项卡中，文本颜色更改为白色

<div class="wrap"> 

     <ul class="accordion1"> 
      <li> 
       <h2 id="first">CMT</h2> 
       <div class="content"> 
        <ul class="accord"> 
         <li> 
          <a href="#">main link1</a> 
          <ul> 
           <li><a href="#">Link One</a></li> 
           <li><a href="#">Link Two</a></li> 
           <li><a href="#">Link Three</a></li> 
           <li><a href="#">Link Four</a></li> 
           <li><a href="#">Link Five</a></li> 
          </ul> 
         </li> 

         <li> 
          <a href="#">main link2</a> 
          <ul> 
           <li><a href="#">Link One</a></li> 
           <li><a href="#">Link Two</a></li> 
           <li><a href="#">Link Three</a></li> 
           <li><a href="#">Link Four</a></li> 
           <li><a href="#">Link Five</a></li> 
          </ul> 
         </li> 
        </ul> 
       </div> 
      </li> 
      <li> 
       <h2><a href="#">FOIS</a></h2> 
      </li> 
      <li> 
       <h2>ASP</h2> 
       <div class="content"> 
        <ul> 
        </ul> 
       </div> 
      </li> 
      <li> 
       <h2>PTT</h2> 
       <div class="content"> 
        content PTT 
       </div> 
      </li> 
     </ul> 
    </div>

CSS

.wrap { 
    margin-left: 0px; 
    margin-top: 0px; 
    width: 100px; 
} 

.accordion1 { 
    width: 178px; 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
    border: 1px solid #ddd; 
} 

    .accordion1 h2 { 
     font-size: 12px; 
     font-weight: bold; 
     font-family: Arial, Helvetica, sans-serif; 
     margin: 0px; 
     text-decoration: none; 
     padding: .25em .25em .25em 2em; 
     color: #333; 
     background: url('compo_images/gradient_v_gray.gif') repeat-x; 
     background: url("./compo_images/arrow_exp_s.gif") 1em .75em no-repeat; 
     border-bottom: 1px solid #ddd; 
     cursor: pointer; 
    } 

     .accordion1 h2:hover { 
      background: url('compo_images/gradient_v_orange.gif') repeat-x; 
      color: white; 
     } 

    .accordion1 li h2 a { 
     color: black; 
     text-decoration: none; 
    } 

    .accordion1 li div.content { 
     padding: 3px; 
     background: #fcfbfb; 
     border-bottom: 1px solid #ddd; 
     /*border: 1px solid #ddd;*/ 
    } 

    .accordion1 li:hover h2 { 
     color: white !important; 
     background-image: url("./compo_images/arrow_exp_n.gif"); 
     background:orange; 
    } 

     .accordion1 li:hover h2 a { 
      color: white !important; 
     } 

.accord > li { 
    padding: 0; 
    list-style-type: none; 
} 

    .accord > li > a { 
     text-decoration: none; 
     font-family: Arial, Helvetica, sans-serif; 
     font-size: 12px; 
     padding-left: 12px; 
     color: #5f5c5c; 
     background: url("./compo_images/arrow_pointer_se.gif") 0.002em no-repeat; 
    } 

    .accord > li > ul > li > a { 
     text-decoration: none; 
     color: #5f5c5c; 
     font-family: Arial, Helvetica, sans-serif; 
     font-size: 11px; 
     background: url("./compo_images/arrow_dirmini_orange_e.gif") 0.35em no-repeat; 
     padding-left: 17px; 
    } 

    .accord > li > ul { 
     list-style-type: none; 
     text-align: left; 
     margin: 0; 
     padding: 1px; 
    } 

.accord { 
    text-decoration: none; 
    padding-left: 5px; 
} 

    .accord > li > a:hover { 
     color: #f8b106; 
    } 

    .accord > li > ul > li > a:hover { 
     color: #f8b106; 
    } 

.accordion1 > li > h2.active { 
    color: white; 
    background: orange; 
}

雅阁

jQuery(function ($) { 
    $('.accord li').hover(function() { 
     $(this).find('ul').stop(true, true).slideDown() 
    }, function() { 
     $(this).find('ul').stop(true, true).slideUp() 
    }).find('ul').hide() 

    var $lis = $('.accordion1 > li'), $contents = $lis.children('.content').hide(); 
    var $h2s = $lis.children('h2').click(function() { 
     var $this = $(this), $t = $this.next(); 
     $contents.not($t).stop(true, true).slideUp(); 
     $this.toggleClass('active', !$t.is(':visible')); 
     $t.slideToggle(); 
     $h2s.not(this).removeClass('active'); 
    }) 
})

来源

2013-10-10 user2841408

所以，你再回来，你需要的是这个

Demo

.accordion1 > li > h2.active, .accordion1 > li > h2.active a { 
    color: white; 
    background: orange; 
}

说明：

你有这个选择.accordion1 > li > h2.active其制成具有类.activeh2元素，正如我在昨天here解释你，除非你指定继承您的a元素不会继承的颜色，所以你的FOIS是用a打包的，所以为了达到目标，我在你的CSS中添加了另一个选择器。

在另一方面，你也可以使用color组使用选择器inherit

.accordion1 > li > h2.active a { 
    color: inherit; 
}

来源

2013-10-10 05:54:36

先生外星人thanku :) – user2841408

@ user2841408你欢迎:) –

如果你只想使用CSS：你应该使用 a:link,a:visited,a:hover,a:active改变你的CSS，你可以写他们任何人的css代码

来源

2013-10-10 06:02:44

在活动选项卡中，文本颜色更改为白色

回答

相关问题