Javascript - 包含内容列表的选项卡

Question

我目前正在努力为一个非常恼人的问题找到一个好的解决方案。

我目前在我的网站上使用标签，这些标签使用了UL，LI系统，就像我在教程中找到的大多数标签系统一样。

主要问题是，由于javascript我无法在我的内容中使用UL，LI系统。

javascript将一个活动的类添加到选定的选项卡，并在切换到另一个选项卡时立即将其删除，这会强制所有LI继承＆＃34; display：none;＆＃34;功能

解决此问题的最佳方法是什么？

这是javascript部分

$(function () {
var container = $('.tabs-container'),
    tabs      = container.find('.tabs li'),
    links     = tabs.find('a'),
    contents  = container.find('.contents li');

links.click(function (e) {
    e.preventDefault();
});

tabs.on('click', function () {
    var $this    = $(this),
        $id      = $this.find('a').attr('href'),
        $target  = container.find('.contents ' + $id);

    if ($this.hasClass('active'))
        return;

    tabs.removeClass('active');
    $this.addClass('active');

    contents.removeClass('active').hide();
    $target.fadeIn(500).addClass('active');
});
});

我已经添加了一个JSFiddle代码（ https://jsfiddle.net/f6jLt91d/）

正如您所看到的，初始标签中有一个列表，其中显示了“精细”字样。一旦我添加了＆＃34;显示：inline＆＃34;手动设置样式，但只要切换到标签2然后返回标签1，它们就会消失。

我可能忽略了一些非常小而愚蠢的东西，但过去3天我一直为此烦恼，似乎无法找到解决这个问题的解决方案，任何人？< / p>

Answer 1

您需要具体使用CSS选择器，因为您拥有<li>的内容。这真的是一个LoL。不要使用它。但是我见过的最好的代码之一。

修复非常简单。仅隐藏顶级<li>，不要在树上运行。我正在更改选择器以在此处使用子选择器。首先，它选择导致问题的后代。

tabs      = container.find('.tabs > li'),
contents  = container.find('.contents > li');

<强>段

$(function () {
  var container = $('.tabs-container'),
      tabs      = container.find('.tabs > li'),
      links     = tabs.find('a'),
      contents  = container.find('.contents > li');

  links.click(function (e) {
    e.preventDefault();
  });

  tabs.on('click', function () {
    var $this    = $(this),
        $id      = $this.find('a').attr('href'),
        $target  = container.find('.contents ' + $id);

    if ($this.hasClass('active'))
      return;

    tabs.removeClass('active');
    $this.addClass('active');

    contents.removeClass('active').hide();
    $target.fadeIn(500).addClass('active');
  });
});

.tabs-container {
  margin-left:auto;
  margin-right:auto;
  width: 400px;
  float: none;
  list-style: none;
  position: relative;
  margin: 0px 0 0 10px;
  text-align: left;
}

.tabs-container .tabs,
.tabs-container .contents {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tabs-container .tabs li {
    float: left;
    display: block;
    padding: 10px 15px;
  border-radius: 2px 2px 0 0;
  font-size: 18px;
  font-weight: normal;
  text-transform: uppercase;
  background: #222;
  cursor: pointer;
  position: relative;
  top: 4px;
  border-left: 1px solid #000;
  border-top: 1px solid #000;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.tabs-container .tabs li:last-child { margin-right: 0; }

.tabs-container .tabs li:hover {
  background: #111;
}

.tabs-container .tabs li.active {
  top: 0;
  padding-top: 17px;
  background: #000;
}

.tabs-container .tabs li a {
    text-decoration: none;
    color: #666;

}

.tabs-container .tabs li.active a,
.tabs-container .tabs li:hover a {
    color: #888;
}

/* Tab Contents */

.tabs-container .contents {
  width: 100%;
  font-size: 12px;
  line-height: 18px;
  padding: 20px;
  top: 53px;
  left: 0;
  background: #222;
  border: 1px solid #000;
  border-radius:5px;
}

.tabs-container .contents li {
    display: none;
}

.tabs-container .contents li.active {
    display: block;
    color:#FFF;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs-container">
  <ul class="tabs cf">
    <li class="active"><a href="#one">Tab 1</a></li>
    <li><a href="#two">Tab 2</a></li>
    <li><a href="#three">Tab 3</a></li>
    <li><a href="#four">Tab 4</a></li>
  </ul>

  <ul class="contents cf">
    <li id="one" class="active">
      <ul>
        <li style="display:inline;">Testing</li>
        <li style="display:inline;">Testing</li>
        <li style="display:inline;">Testing</li>
        <li style="display:inline;">Testing</li>
        <li style="display:inline;">Testing</li>
      </ul>
    </li>
    <li id="two">
      Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing 
    </li>
    <li id="three">
      Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing 
    </li>
    <li id="four">
      Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing 
    </li>
  </ul>
</div>

小提琴：https://jsfiddle.net/engcr3qp/