Question

我有一个标签系统，似乎在我的CMS中运行良好;但是，我很难在首次加载时隐藏子内容区域。单击选项卡后 - 它会隐藏内容。我错过了什么？

(function($) {

  var tabs = $(".tabs li a");

  tabs.click(function() {
    var content = this.hash.replace('/', '');
    tabs.removeClass("active");
    $(this).addClass("active");
    $("#content").find('p').hide();
    $(content).fadeIn(200);
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <ul class="tabs group">
    <li>
      <a class="active" href="#/one">Tab 1</a>
    </li>
    <li>
      <a href="#/two" id="tabs2">Tab 2</a>
    </li>
    <li>
      <a href="#/three" id="tabs3">Tab 3</a>
    </li>
  </ul>
  <div id="content">
    <p id="one" style="clear: both;"><strong>Product Summary 1</strong><br>
      <br>
      <strong>Lorem ipsum 1</strong><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus, nunc nec efficitur facilisis, mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus, nunc nec efficitur facilisis,
      mi.<br>
      <br></p>
    <p id="two"><strong>Product Summary 2</strong><br>
      <br>
      <strong>Lorem ipsum 2</strong><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus, nunc nec efficitur facilisis, mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus, nunc nec efficitur facilisis,
      mi.<br>
      <br></p>
    <p id="three"><strong>Product Summary 3</strong><br>
      <br>
      <strong>Lorem ipsum 3</strong><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus, nunc nec efficitur facilisis, mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus, nunc nec efficitur facilisis,
      mi.<br>
      <br></p>
  </div>
</div>

由于我们的CMS，我对代码的移动很少，因为TinyMCE WYSIWYG将剥离大部分代码。所以上面的HTML几乎就是它所展示的所有内容，我可以在CMS的另一部分中添加JQuery和CSS。

您将在我的fiddle中看到一个包含所有HTML，JQuery和CSS的工作示例。

我知道这会是一些愚蠢的事情，当有人助攻时，我可能会在头脑中打败自己 - 但我会恭维帮助。

非常感谢

Answer 1

添加

#two, #three{
  display:none;
}

到样式表的底部。 https://jsfiddle.net/shv3rxn7/7/

Answer 2

您可以使用解决方案https://jsfiddle.net/1u8m8pko/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<ul class="tabs group">
    <li>
        <a href="#/one" data-id="one">Tab 1</a>
    </li>
    <li>
        <a href="#/two" data-id="two" id="tabs2">Tab 2</a>
    </li>
    <li>
        <a href="#/three" data-id="three" id="tabs3">Tab 3</a>
    </li>
</ul>
<div id="content">
    <p id="one" style="clear: both;"><strong>Product Summary 1</strong><br>
    <br>
    <strong>Lorem ipsum 1</strong><br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus,
    nunc nec efficitur facilisis, mi. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Pellentesque tempus, nunc nec efficitur facilisis, mi.<br>
    <br></p>
    <p id="two"><strong>Product Summary 2</strong><br>
    <br>
    <strong>Lorem ipsum 2</strong><br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus,
    nunc nec efficitur facilisis, mi. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Pellentesque tempus, nunc nec efficitur facilisis, mi.<br>
    <br></p>
    <p id="three"><strong>Product Summary 3</strong><br>
    <br>
    <strong>Lorem ipsum 3</strong><br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus,
    nunc nec efficitur facilisis, mi. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Pellentesque tempus, nunc nec efficitur facilisis, mi.<br>
    <br></p>
</div>

data-id

我已将data-id即数据属性添加到锚标签（标签）。

添加了jQuery点击事件以获取svydesign()。使用jQuery我触发了第一个标签的点击。

希望这会对你有所帮助。

CSS选项卡 - 首次加载时隐藏子内容

2 个答案: