Question

我正在创建一个网站，通过这个开源脚本使用大约5个“J.Query-Tabbed-Window Boxs”; 'http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/#comment-16690'它实现了很好，并且让它工作并保持漂亮甚至IE 6 +

我在同一页面上再次使用它有两次麻烦，我复制了标记，甚至尝试复制样式并重命名标记Div和相关样式 - 但仍然不成功。我不应该去上课，对吗？选项卡呈现并且很好，但无论我到目前为止尝试过什么，单击选项卡时 - 在该窗口/区域内不执行任何操作，而是链接到初始第一个“选项卡框”内的导航。

有关在同一页面上再实施4次的建议吗？

我为此实施的代码与参考链接中显示的代码完全相同;以下是在1个实例中实现的链接。的 “http://www.sohtanaka.com/web-design/examples/tabs/”

我正在使用的HTML Mark-Up可以在这里查看; ' http://s000.tinyupload.com/index.php?file_id=08860571195966022003&gk=transfer '通过文本.rtf文件中的tinyupload。

欢呼帮助！

Answer 1

这或许是因为您对所有标签组（如tab1，tab2）始终使用相同的ID。

为每个标签使用唯一标识符，并确保链接像这样正确地指向每个标签

<ul class="tabs">
    <li><a href="#tab1">Gallery</a></li>
    <li><a href="#tab2">Submit</a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
        <!--Content-->
    </div>
    <div id="tab2" class="tab_content">
       <!--Content-->
    </div>
</div>


<ul class="tabs">
    <li><a href="#tab3">Gallery</a></li>
    <li><a href="#tab4">Submit</a></li>
</ul>

<div class="tab_container">
    <div id="tab3" class="tab_content">
        <!--Content-->
    </div>
    <div id="tab4" class="tab_content">
       <!--Content-->
    </div>
</div>

Answer 2

问题是上面链接中引用的javascript没有考虑选项卡的任何分组。为了在同一页面上有多个选项卡，您必须向javascript添加一些分组逻辑。

您可能还应该对您的HTML进行分组。 EX：

<div class="tab-parent">
    <ul class="tabs">...</ul>
    <div class="tab_container">...</div>
</div>

我已经把一个快速的DIRTY示例放在一起，说明如何在http://jsfiddle.net/justinobney/aSQjF/2/完成此任务

Fullscreen Example

你应该重构一下......

Answer 3

<div class="tabcontainer">

  <ul class="tabheading">

                    <li class="active" rel="tab1"><a href="javascript:return false;">Tab 1</a> </li>

                    <li rel="tab2"><a href="javascript:return false;">Tab 2</a> </li>
 </ul>



  <div class="tabbody active" id="tab1" style="display: block;">
    Tab 1
    Your Text or html

  </div>

  <div class="tabbody" id="tab2" style="display: none;">
    Tab 2
    Your Text or html

  </div>

</div>


<script>
     $('.tabheading li').click(function () {
            var tabid = $(this).attr("rel");
            $(this).parents('.tabcontainer').find('.active').removeClass('active');
            $('.tabbody').hide();
            $('#' + tabid).show();
            $(this).addClass('active');

            return false;
        });
    </script>

CSS和jQuery的简单选项卡 - 自定义＆amp;复制

3 个答案: