如何使手风琴选项卡在活动时具有不同的颜色

How to make accordion tabs in different color when active

本文关键字：颜色 活动 手风琴 何使 选项      更新时间：2023-09-26

我需要按照以下方式设计手风琴。。。http://jsfiddle.net/gmcLnowa/1/如小提琴上所示。

我需要解决两件事。

One：如何在默认情况下保持第一个选项卡打开。

第二：当特定选项卡内容处于活动状态或可见状态时，如何以不同颜色显示每个活动选项卡。

假设处于活动状态

示例一：蓝色示例二：红色例三：黄色。

<div id="accordion">
  <ul>
    <li>
      <a href="#one">Example one</a>
    </li>
    <li>
      <a href="#two">Example two</a>
    </li>    
    <li>
      <a href="#three">Example three</a>
    </li>
  </ul>
        <div id="one" class="accordion">
        ONE Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium. 
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
      </div>
      <div id="two" class="accordion">
        TWO Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
      </div>
        <div id="three" class="accordion">
        THREE Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
      </div>
</div>

默认情况下，您可以触发点击ready()上的第一个锚点来显示第一个accordian：请注意，您应该在原生元素而不是jQuery元素上触发它。

JS:

$("a").click(function(){
  $(".active").removeClass("active");
  $(this).addClass("active");
})
$("a:first")[0].click()

CSS：

a[href="#one"].active{
  background:blue !important;
}
a[href="#two"].active{
  background:red !important;
}
a[href="#three"].active{
  background:yellow !important;
}

演示

这在jQuery 中是可能的

<a href="#one" colr="red">Example one</a>

更改您想要的自定义颜色属性的颜色

$('#accordion a').click(function(){
    $('#accordion a').css('backgroundColor','transparent');
    $(this).css('backgroundColor',$(this).attr('colr'));
});

小提琴

您应该更改HTML以获得这种效果。

添加了CSS：

#accordion div#one.accordion:target + a {
    color: blue;
}
#accordion div#two.accordion:target + a {
    color: red;
}
#accordion div#three.accordion:target + a {
    color: yellow;
}

更改的HTML：（示例）

<div id="accordion">
    <ul>
        <li>
            <div id="one" class="accordion">ONE.......</div>
            <a href="#one">Example one</a>    
        </li>
        <li>
            <div id="two" class="accordion">TWO.........</div>
            <a href="#two">Example two</a>    
        </li>
        <li>
            <div id="three" class="accordion">THREE........</div>
            <a href="#three">Example three</a>    
        </li>
    </ul>
</div>

工作Fiddle

对于第一个问题，我想您唯一能做的就是将哈希#one附加到页面url或使用jQuery。

对于第二个问题，您可以将其添加到您的css中：

#one {
    border-color: #C00;
}
#two {
    border-color: #FF0;
}
#three {
    border-color: #CF0;
}
相关文章：