Question

我想知道是否有人有解决方案似乎是一个简单的问题。

我正在尝试创建一个选项卡框，其中有一行选项卡在内容框的顶部运行，另一行在内容框的底部运行。

这样的事情：

  <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感谢任何可以提供帮助的人！

Answer 1

首先，你不能在多个元素上使用id，id是独一无二的。将您的tabs id更改为class。第二件事：改变你的li选择器的id是这样的，以便于操作。

Here is working 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>

<强> jQuery的：

$(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');
    });
});

Answer 2

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

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

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

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

兼容性是IE8 +。 IE7的后备将使用.tabs li { display: inline;zoom:1;}（这相当于IE7的display: inline-block - 因为他们不了解table-things或inline-block ......）

使用2行选项卡，1个内容框，javascript / jQuery创建选项卡

2 个答案: