Question

我的页面像导航栏一样构建，下面我有页面标签，显示不同的内容，但我无法在加载时只显示其中一个。

<div class="tabs">
    <div class="row">
        <div class="container">
            <div class="col-sm-12">
                <ul class="nav nav-pills nav-justified tab-links">
                    <li class="active"><a id="tab1" class="pillsnavigation" href="#tab1">Adressbuch</a></li>
                    <li><a class="pillsnavigation" href="#tab2">Neuer Kontakt</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

现在我希望页面显示＆＃34; tab1＆＃34;当它第一次加载时，我该怎么做？

我的JS：

<script>
        jQuery(document).ready(function () {
            jQuery('.tabs .tab-links a').on('click', function (e) {
                var currentAttrValue = jQuery(this).attr('href');

                // Show/Hide Tabs

                jQuery('.tab' + currentAttrValue).show().siblings().hide();

                // Change/remove current tab to active
                jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

                e.preventDefault();
            });`enter code here`
        });
    </script>

Answer 1

使用JQuery：

$(document).ready(function () {
    $(".tab-pane").removeClass('active');
    $("#tab1").addClass('active');
});

如果你的标签HTML是这样的

<div class="tabs-container">
<div class="tab-content">
    <div id="tab1" class="tab-pane">
        <div class="wrapper wrapper-content animated fadeInDown">

        </div>
    </div>
    <div id="previewTemplate" class="tab-pane">
        <div class="wrapper wrapper-content animated fadeInDown">

        </div>
    </div>
</div>

Answer 2

试试这个：

＆＃13;

jQuery(document).ready(function() {
  jQuery('.tabs .tab-links a').on('click', function(e) {
    e.preventDefault();
    // Show/Hide Tabs
    var parentLi = $(this).parent();
    jQuery('.tabs .tab-links li').not(parentLi).hide();

    // Change/remove current tab to active 
    //jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tabs">
  <div class="row">
    <div class="container">
      <div class="col-sm-12">
        <ul class="nav nav-pills nav-justified tab-links">
          <li class="active"><a id="tab1" class="pillsnavigation" href="#tab1">Adressbuch</a></li>
          <li><a class="pillsnavigation" href="#tab2">Neuer Kontakt</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

＆＃13;

如何在页面加载时仅显示1个选项卡

2 个答案: