带有CSS和jQuery的简单选项卡 - 定制和复制

Question

我正在创建一个网站，通过这个开源脚本使用大约5个' jquery -选项卡窗口框';'http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/#comment-16690'它实现得很好，并且已经使它工作并且在IE 6 +中保持得很好

我在同一页面上使用这个四次以上时遇到了一些麻烦，我已经复制了标记，甚至尝试复制样式并将标记重命名为div和相关样式-但仍然不成功。我不应该碰这些类，对吧?标签渲染很好，但是不管我到目前为止尝试了什么，标签，当点击时，在那个窗口/区域内什么也不做，而是链接到最初的第一个"标签框"内的导航。

在同一页面上实现这4次有什么建议吗?

我为此实现的代码与参考链接中显示的完全相同;这是它在一个实例中实现的链接。 " http://www.sohtanaka.com/web-design/examples/tabs/"

我使用的HTML标记可以在这里完整查看;'http://s000.tinyupload.com/index.php?file_id=08860571195966022003&gk=transfer'通过tinyupload在text .rtf文件。

为帮助干杯!

Answer 1

问题是上面链接中引用的javascript没有考虑到标签的任何分组。为了在同一个页面上有多个选项卡，你必须在javascript.

中添加一些分组逻辑。

你可能也应该分组你的html。例:

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

我在http://jsfiddle.net/justinobney/aSQjF/2/上提供了一个快速的DIRTY示例，说明如何完成此任务。

全屏例子

Answer 2

这可能是因为你一直在为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 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>