如何在一个页面中使用 Jquery-tabs.js 的多个实例

Question

我是 HTML 和 jquery 的新手，并且一直在尝试将 jquery-tabs.js 小部件的多个实例在我网站上的同一页面。下面是我的第一个选项卡的 HTML 代码。

<div id="tabs-container">
        <div id="tabs">
            <ul class="mctabs"> 
                <li><a href="#view1">ContentA</a></li>
                <li><a href="#view2">ContentB</a></li>
            </ul> 
        </div><!--end tabs-->

        <div class="panel-container"> 
                <div id="view1"> 
                 <ul>
                    <li class="view1span1">
                        <section>Bla bla bla bla </section>
                    </li>
                        <li class="view1span2">
                        <section>Bla bla bla bla </section>
                    </li>
                 </ul>
                </div><!--end view1-->

            <div id="view2"> 
                 <ul>
                    <li class="view2span1">
                        <section>Bla bla bla bla </section>
                    </li>
                        <li class="view2span2">
                        <section>Bla bla bla bla </section>
                    </li>
                 </ul>
                </div><!--end view2-->
           </div><!--end panel-container-->
    </div><!--end tabs-container-->

这是第二个选项卡的代码

    <div id="container-next" class="slide" data-slide="3">

        <div id = "tabs2">
            <ul class = "mctabs">
                <li><a href = "#view5"> ContentC </a></li>
                <li><a href = "#view6"> ContentD </a></li>
            </ul>
        </div><!--end tabs2-->
   </div>

    <div class="container-12" data-tabber>

    <div id = "view5"> 

    <ul>
     <li class="grid-4">
        <section> blablablabla </section>
      </li>
    </ul>
    </div><!--end view5-->

    <div id = "view6"> 
    <ul>

        <li class="grid-4">
            <section> blablablabla </section>
          </li>
          </ul>
        </div> <!--end view6-->
      </div> <!--end container-12-->
    </div> <!-- end container-next-->

当我尝试让选项卡工作时发生了两件事

1) 当我单击第二个选项卡的 header 项目时，第一个选项卡的项目完全消失。

2) 当我单击 ContentD 的相应选项卡时，第二个选项卡上视图 6 中的项目不显示。当我检查网站时，HTML 中显示了以下内容。

<div id = "view6" style = "display: none;">...</div>

这不是网站的完整代码，所以如果你们需要更多信息，请告诉我。

感谢阅读这个冗长的问题。

Answer 1

我认为问题出在 <div id="tabs"> 中，它应该包括 <div class="panel-container">，而不仅仅是 <ul class="mctabs">。

试试这个：

第一个标签：

<div id="tabs-container">
    <div id="tabs">
        <ul class="mctabs"> 
            <li><a href="#view1">ContentA</a></li>
            <li><a href="#view2">ContentB</a></li>
        </ul> 


        <div class="panel-container"> 
            <div id="view1"> 
                <ul>
                    <li class="view1span1">
                        <section>Bla bla bla bla1 </section>
                    </li>
                    <li class="view1span2">
                        <section>Bla bla bla bla2 </section>
                    </li>
                </ul>
            </div>

            <div id="view2"> 
                <ul>
                    <li class="view2span1">
                        <section>Bla bla bla bla3 </section>
                    </li>
                    <li class="view2span2">
                        <section>Bla bla bla bla4 </section>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

第二个选项卡：

<div id="container-next" class="slide" data-slide="3">

    <div id = "tabs2">
        <ul class = "mctabs">
            <li><a href = "#view5"> ContentC </a></li>
            <li><a href = "#view6"> ContentD </a></li>
        </ul>



        <div class="container-12" data-tabber>

            <div id = "view5"> 

                <ul>
                    <li class="grid-4">
                        <section> blablablabla7 </section>
                    </li>
                </ul>
            </div>

            <div id = "view6"> 
                <ul>

                    <li class="grid-4">
                        <section> blablablabla8 </section>
                    </li>
                </ul>
            </div>
        </div> 
    </div> 
</div>

和脚本：

<script>
  $( "#tabs" ).tabs();
  $( "#tabs2" ).tabs();
</script>

Answer 2

感谢您的输入:)

我回去问了一些同事这个问题，原来我遇到的问题是因为以前的网络开发人员没有把分配标签和标签2的脚本放在正确的地方。

我目前正在尝试花一些时间找出隐藏脚本的位置，但非常感谢所有为此花时间的人！

如何在一个页面中使用 Jquery-tabs.js 的多个实例

How to use multiple instances of Jquery-tabs.js in one page

html

javascript

jquery

tabs

jquery-ui