javascript - 事件时如何制作不同颜色的 Accordion 标签

Question

我需要按以下方式设计 Accordion ... http://jsfiddle.net/gmcLnowa/1/如 fiddle 所示。

我需要修复两件事。

一:如何让第一个Tab默认打开。

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

让我们说什么时候活跃

示例一:蓝色 例子二:红色 示例三:黄色。

<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>

Answer 1

您可以触发点击 ready() 上的第一个 anchor 以默认显示第一个 Accordion :请注意，您应该在 native 元素而不是 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;
}

Demo