Question

这有什么问题？它运作良好，但突然间它破了。每当我点击dropup选项时，选项卡都不会像假设那样改变。我查看了代码是否有任何语法错误，但没有找到。请指教：

JavaScript的：

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

        // Show/Hide Tabs
        jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

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

        e.preventDefault();
    });
});
</script>

HTML：

<div class="row">
 <div class="col-xs-6">

    <div class="tabs">

    <div class="tab-content">
        <div id="tab1" class="tab active">
            <p><h3 class="text-center"><b>Test</b></h3></p>
            <p><img style="width:100%; height:100%" src="/assets/image.jpg"/></p>
        </div>

        <div id="tab2" class="tab">
            <p><h3 class="text-center"><b>Test</b></h3></p>
          <p><img style="width:100%; height:100%" src="/assets/image.jpg"/></p>
        </div>

        <div id="tab3" class="tab">
            <p><h3 class="text-center"><b>Test</b></h3></p>
            <p><img style="width:100%; height:100%" src="/assets/image.jpg"/></p>
        </div>

        <div id="tab4" class="tab">
            <p><h3 class="text-center"><b>Test</b></h3></p>
            <p><img style="width:100%; height:100%" src="/assets/image.jpg"/></p>
        </div>

        <div id="tab5" class="tab">
            <p><h3 class="text-center"><b>Test</b></h3></p>
            <p><img style="width:100%; height:100%" src="/assets/image.jpg"/></p>
        </div>
 <div id="tab6" class="tab">
            <p><h3 class="text-center"><b>Test</b></h3></p>
            <p><img style="width:100%; height:100%" src="/assets/image.jpg"/></p>
        </div>
 <div id="tab7" class="tab">
            <p><h3 class="text-center"><b>Test</b></h3></p>
            <p><img style="width:100%; height:100%" src="/assets/image.jpg"/></p>
        </div>
 <div id="tab8" class="tab">
            <p><h3 class="text-center"><b>Test</b></h3></p>
            <p><img style="width:100%; height:100%" src="/assets/image.jpg"/></p>
        </div>
</div>

<p><h2 class="text-center">Some Text</h2></p>
<div class="dropup text-center">
  <button class="btn btn-default dropdown-toggle text-center" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Choose One
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu text-center" aria-labelledby="dropdownMenu1">
        <li class="text-center"><a href="#tab1">ASI</a></li>
        <li class="text-center"><a href="#tab2">Test</a></li>
        <li class="text-center"><a href="#tab3">Test</a></li>
        <li class="text-center"><a href="#tab4">Test</a></li>
        <li class="text-center"><a href="#tab5">Test</a></li>
        <li class="text-center"><a href="#tab6">Test</a></li>
        <li class="text-center"><a href="#tab7">Test</a></li>
        <li class="text-center"><a href="#tab8">Test</a></li>
  </ul>
</div>
</div>
</div>

基于：jQuery Tabs

Answer 1

您错过了jquery tab上的document.ready初始化。

 $(".tabs").tabs();

工作示例：https://jsfiddle.net/DinoMyte/p12qvon2/

JQuery选项卡停止工作

1 个答案: