[英]jquery define tabs with content
我喜欢使用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/
添加一些课程:-)
<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();
});
见这里的工作示例:
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;
}
希望它会有所帮助。 谢谢!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.