1

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

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

像这样的东西：

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

4

2 回答 2

1

首先你不能id在多个元素上使用，id's are 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>

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');
    });
});
于 2013-01-28T21:35:54.363 回答
0

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

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

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

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

兼容IE8+。IE7- 的后备将使用.tabs li { display: inline;zoom:1;}（这相当于display: inline-blockIE7- 因为他们既不了解表格内容也不了解内联块......）

于 2013-01-28T22:18:04.930 回答