Javascript - 内容中带有列表的选项卡

Question

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

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

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

javascript 向选定的选项卡添加一个事件类，并在您切换到另一个选项卡时立即将其删除，这会强制所有 LI 继承“display:none;”功能。

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

这是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/ )

如您所见，初始选项卡中有一个列表，一旦我在样式中手动添加“display:inline”规则，它就会显示“正常”，但是一旦您切换到选项卡 2 然后返回到选项卡 1，它们将消失。

我可能在这里忽略了一些非常小和愚蠢的事情，但过去 3 天我一直被这个问题困扰，似乎找不到解决这个问题的解决方案，有人吗？

Answer 1

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

修复非常简单。仅隐藏顶层 <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>

fiddle :https://jsfiddle.net/engcr3qp/