[英]jquery define tabs with content
I like to use JQuery for creating tabs. 我喜欢使用JQuery来创建标签。 My issue is all jquery tab definitions follow this design.
我的问题是所有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>
However, I need a design like this: 但是,我需要这样的设计:
<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>
Is the above design possible? 以上设计是否可行?
Also, I need the tabs to be recognised by css class and not ids (since I create tabs dynamically through code). 此外,我需要通过css类识别选项卡而不是ID(因为我通过代码动态创建选项卡)。 Is this possible too?
这也可能吗?
Update: Thanks for all the great minds who helped me, I'm able to establish what I wanted. 更新:感谢所有帮助过我的伟大思想家,我能够建立我想要的东西。 I have used the inputs from the below posts and improved them for placing multiple tabs in a page.
我使用了以下帖子中的输入并对其进行了改进,以便在页面中放置多个标签。
Find the demo here: http://jsfiddle.net/sunalive/VHPwP/12/ 在这里找到演示: http : //jsfiddle.net/sunalive/VHPwP/12/
add some classes :-) 添加一些课程:-)
<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();
});
See working example here: 见这里的工作示例:
http://jsfiddle.net/rathoreahsan/q7Lqq/ http://jsfiddle.net/rathoreahsan/q7Lqq/
HTML CODE: 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 JQUERY
$('.tabs').click(function(){
$(this).parent().find('.contents').hide();
$(this).next().show();
});
CSS 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;
}
Hope it will be helpful. 希望它会有所帮助。 Thanks!
谢谢!
Below are links for creating tabs dynamically: 以下是动态创建标签的链接:
http://blog.favrik.com/2009/08/11/dynamically-adding-jquery-tabs-round2/ http://blog.favrik.com/2009/08/11/dynamically-adding-jquery-tabs-round2/
http://www.jankoatwarpspeed.com/post/2010/01/26/dynamic-tabs-jquery.aspx http://www.jankoatwarpspeed.com/post/2010/01/26/dynamic-tabs-jquery.aspx
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.