jquery定义包含内容的标签

问题描述：

我喜欢使用JQuery创建标签。我的问题是所有的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/

答

看到这里的工作例如：

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

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

非常感谢。这是马上工作。它也适用于嵌套选项卡。但是，嵌套的内容div会溢出父内容div（因为positon：绝对属性）。试图改变它，但改变扭曲了标签的位置。我希望父母根据内容调整自己的总高度。你能帮我解决吗？ – Ravi

Ravi，我不擅长编程（逻辑），请看这个演示：http://jsfiddle.net/rathoreahsan/Gfxvk/如果你擅长编程，那么你可以用你自己的方式来实现。在这个演示中，我想选择每个4rth选项卡，并代表我想从顶部添加31px的内容div。这就是全部 –

谢谢Ahsan。我想出了一条出路。 – Ravi

答

添加一些类:-)

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

这似乎是我需要的一个。我今天会试试这个。谢谢。 – Ravi

答

下面是动态创建标签链接：

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

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

jquery定义包含内容的标签

相关推荐