0

我喜欢使用 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 类而不是 ids 识别选项卡（因为我通过代码动态创建选项卡）。这也可能吗？

更新：感谢所有帮助我的伟大思想家，我能够建立我想要的东西。我使用了以下帖子中的输入并改进了它们以在页面中放置多个选项卡。

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

4

3 回答 3

1

请参阅此处的工作示例：

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>

查询

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

希望它会有所帮助。谢谢！

于 2012-06-20T07:40:16.330 回答
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();
});
于 2012-06-20T06:36:34.203 回答
0

以下是动态创建选项卡的链接：

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

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

于 2012-06-20T06:39:32.933 回答