创建包含 2 行选项卡、1 个内容框、javascript/jQuery 的选项卡

Create tabs with 2 rows of tabs, 1 content box, javascript/jQuery

本文关键字：选项 javascript jQuery 包含 行选 创建      更新时间：2023-09-26

我想知道是否有人能解决看似简单的问题。

我正在尝试创建一个选项卡框，该选项卡具有一行横跨内容框顶部的选项卡和另一行沿着内容框底部运行的选项卡。

像这样：

  <div id="tabContainer">
    <div id="tabs">
      <ul>
        <li id="tabHeader_1">Tab 1</li>
        <li id="tabHeader_2">Tab 2</li>
        <li id="tabHeader_3">Tab 3</li>
      </ul>
    </div>
    <div id="tabscontent">
      <div class="tabpage" id="tabpage_1">
        <h2>Page 1</h2>
        <p>Content 1</p>
      </div>
      <div class="tabpage" id="tabpage_2">
        <h2>Page 2</h2>
        <p>Content 2</p>
      </div>
      <div class="tabpage" id="tabpage_3">
        <h2>Page 3</h2>
        <p>Content 3</p>
      </div>
              <div class="tabpage" id="tabpage_4">
        <h2>Page 4</h2>
        <p>Content 4</p>
      </div>
              <div class="tabpage" id="tabpage_5">
        <h2>Page 5</h2>
        <p>Content 5</p>
      </div>
              <div class="tabpage" id="tabpage_6">
        <h2>Page 6</h2>
        <p>Content 6</p>
      </div>
    </div>
          <div id="tabs">
      <ul>
        <li id="tabHeader_4">Tab 4</li>
        <li id="tabHeader_5">Tab 5</li>
        <li id="tabHeader_6">Tab 6</li>
      </ul>
    </div>
  </div>

Muchos感谢任何可以提供帮助的人！

首先你不能

在多个元素上使用id，id是uniqiue。将tabs id更改为 class 。第二件事：像这样更改您的 li 选择器的 ID，以便于操作。

这是工作jsFiddle。

.html：

   <ul>
        <li id="header_tabpage_1">Tab 1</li>
        <li id="header_tabpage_2">Tab 2</li>
        <li id="header_tabpage_3">Tab 3</li>
   </ul>

j查询：

$(document).ready(function() {
    $('.tabpage').hide().first().show();
    $('.tabs ul li').click(function() {
       var target = $(this).attr('id').replace('header_','');
       //this will return like 'tabpage_1'
       $('.tabpage').hide();
       $('#'+ target).fadeIn(500);
       $('.tabs ul li').removeClass('selected');
       $(this).addClass('selected');
    });
});

@barlas已经声明#tabs在同一页面上存在两次：这是不允许的，请使用类。

这是一个专注于样式（CSS）部分的小提琴：http://jsfiddle.net/XXhSQ/

选项卡行（顶部和底部）和内容显示为table-row（其容器显示为table）。
它们仍然是非语义的div;这些table-things只是应用于它们的视觉显示算法，而不是突然用作布局的表格（后者意味着使用HTML元素，如table，tr和td）。

然后将a元素添加到.tabs>li中，因为选项卡必须可使用鼠标单击，并且可通过键盘（以及触摸）进行聚焦。
当容器（li）显示为等宽的单元格时，它们显示为block以占据其容器的整个宽度。
最后，tabs-up和tabs-down上的一些背景，边框和不同的圆角边框用于演示目的。

兼容性为 IE8+。IE7-的后备是使用.tabs li { display: inline;zoom:1;}（这相当于IE7的display: inline-block-因为他们既不理解表的东西也不理解内联块......

相关文章：