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）当我点击第二个标签的标题项时，第一个标签的项目完全消失。

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

感谢输入:)

我回过头来向一些同事询问这个问题，事实证明我遇到的问题是由于之前的Web开发人员没有将脚本分配给标签和标签2放在适当的位置。

我目前正在尝试花点时间弄清楚脚本隐藏的位置，但感谢大家花时间在这上面！

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

2 个答案: