Question

这个标签导航器在开头没有选中任何标签，所以在你点击它们之前都没有显示tab1或tab2的内容，我在它之外有一个下拉列表，我希望这个标签导航器在两个标签都不显示时返回当您在下拉列表中更改内容时，将显示所选内容并显示其内容。如何在下拉列表的onchange函数中执行此操作。我在页面中有其他标签导航器，因此它只需要影响这一个。

    <div>
        <select id="DropDown1">
            <option selected value="0">0</option>
            <option value="2">1</option>
        </select>
    </div>


     <div class="well well-large">
        <ul class="nav nav-pills" id = "tab_n">
            <li><a href="#Tab1" data-toggle="tab">Tab1</a></li>
            <li><a href="#Tab2" data-toggle="tab">Tab2</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane" id="Tab1">
                //content
            </div>
            <div class="tab-pane" id="Tab2">
                //content
            </div>
        </div>
    </div>


<script>
       $('#DropDown1').on('change', function () {
            //First Try             
            tab_n.children[0].className = tab_n.children[0].className.replace(" active", "");
            tab_nav.children[1].className = tab_nav.children[1].className.replace(" active", "");

            //Second try
            $('a.nav-pills a[href="#Tab1"]').tab('hide');
            $('a.nav-pills a[href="#Tab2"]').tab('hide');

            //third try,this one hid the content permanently and didnt unselect the tab
            $('#Tab1').hide();
            $('#Tab2').hide();
         });    
    <script>

我在这里读到了这个，但没有奏效： http://www.w3schools.com/howto/howto_js_tabs.asp

取消选择选项卡导航器js中的选项卡

0 个答案: