jquery使用內容定義選項卡

Question

我喜歡使用JQuery來創建標簽。 我的問題是所有jquery選項卡定義都遵循此設計。

<div>  
<h4>Heading</h4>  
  <div>  
    <ul>  
     <li><a>Tab 1</a></li>  
     <li><a>Tab 2</a></li>  
     <li><a>Tab 3</a></li>  
    </ul>  
     <div>Content for Tab 1</div>  
     <div>Content for Tab 2</div>  
     <div>Content for Tab 3</div>  
  </div>  
</div>  

但是，我需要這樣的設計：

<div>  
  <h4>Heading</h4>  
  <div>  

    <div><a>Tab 1</a></div>
    <div>Content for Tab 1</div>  

    <div><a>Tab 2</a></div>  
    <div>Content for Tab 2</div>  

    <div><a>Tab 3</a></div>  
    <div>Content for Tab 3</div>  

  </div>  
</div>  

以上設計是否可行？

此外，我需要通過css類識別選項卡而不是ID（因為我通過代碼動態創建選項卡）。 這也可能嗎？

更新：感謝所有幫助過我的偉大思想家，我能夠建立我想要的東西。 我使用了以下帖子中的輸入並對其進行了改進，以便在頁面中放置多個標簽。

在這里找到演示： http ： //jsfiddle.net/sunalive/VHPwP/12/

Answer 1

添加一些課程:-)

<div>  
  <h4>Heading</h4>  
  <div class="parent">  

    <div class="link"><a>Tab 1</a></div>
    <div class="content">Content for Tab 1</div>  

    <div class="link"><a>Tab 2</a></div>  
    <div class="content">Content for Tab 2</div>  

    <div class="link"><a>Tab 3</a></div>  
    <div class="content">Content for Tab 3</div>  

  </div>  
</div>  



$('.link').click(function() {
    $(this).parent().find('.content').hide();
    $(this).next().show();
});

or

$('.link').click(function() {
    $(this).parent().find('.content').hide().end().next().show();
});

Answer 2

見這里的工作示例：

http://jsfiddle.net/rathoreahsan/q7Lqq/

HTML代碼：

    <div class="contents-wrapper">  
          <h4>Heading</h4>  
          <div class="tabs-container">  

              <div class="tabs"><a>Tab 1</a></div>
              <div class="contents" style="display:block">Content for Tab 1</div>  

              <div class="tabs"><a>Tab 2</a></div>  
              <div class="contents">Content for Tab 2</div>  

              <div class="tabs"><a>Tab 3</a></div>  
              <div class="contents">Content for Tab 3</div>  

          </div>  
    </div>

JQUERY

    $('.tabs').click(function(){
        $(this).parent().find('.contents').hide();
        $(this).next().show();
    });

CSS

    .contents-wrapper{
        width: 222px;
        font-family: tahoma;
    }

    h4 {
       height: 40px;
       line-height: 40px;
       background: #666;
       color: #fff;
       font-size: 26px;
       padding: 0 15px;
    }

   .tabs-container { position: relative; }

   .tabs {
       float:left;
       background: #ccc;
       height: 30px;
       line-height: 30px;
       padding: 0 16px;
       border-right:1px solid #666;
       border-bottom:1px solid #666;
       cursor: pointer;
    }

    .tabs:hover { background: #f4f4f4; }

    .contents {
       position: absolute;
       margin-top: 31px;
       padding: 15px;
       border: 1px solid #ccc;
       width: 190px;
       font-size: 12px;
       font-weight:bold;
       display: none;
     }

希望它會有所幫助。 謝謝！

Answer 3

以下是動態創建標簽的鏈接：

http://blog.favrik.com/2009/08/11/dynamically-adding-jquery-tabs-round2/

http://www.jankoatwarpspeed.com/post/2010/01/26/dynamic-tabs-jquery.aspx