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

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>

非常感谢任何可以提供帮助的人!

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