首页 新闻 搜索 专区 学院

请教一段DIV选项卡代码,JQUERY

0
悬赏园豆:15 [已解决问题] 解决于 2010-12-08 09:20

<!-- description and features -->
<div id="more_info_block" class="smoothTabs">
<ul id="more_info_tabs" class="idTabs idTabsShort">
<li><a class="selected" id="more_info_tab_more_info" href="#idTab1">Moreinfo</a></li>
<li><a class="mydifineLI2" id="more_info_tab_data_sheet" href="#idTab2">Data sheet</a></li>
</ul>
<div id="more_info_sheets">
<!-- full description -->
<div class="" id="idTab1"><p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean sagittis arcu non orci hendrerit in imperdiet
lectus molestie. Curabitur adipiscing felis arcu, at gravida velit. Sed
quis neque sed nibh sagittis lobortis vel nec lacus. Sed ut fermentum
risus.
</p>
</div>
<!-- product's features -->
<div>
<ul class="block_hidden_only_for_screen" id="idTab2">
<li><span>Width:</span> 5"</li>
<li><span>Height:</span> 15"</li>
<li><span>Depth:</span> 5"</li>
<li><span>Weight:</span> 3 kg</li>
<li><span>Size:</span> M</li>
</ul>
</div>
</div>

</div>

 

两个选项卡点击切换,麻烦路过的朋友指点一下。

denli的主页 denli | 初学一级 | 园豆:19
提问于:2010-11-18 17:24
< >
分享
最佳答案
0

参考:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body,div,ul
{ padding:0; margin:0;}
#container
{width:800px; margin:50px;}
.tab
{ padding:0; margin:0; }
.tab li
{ list-style:none; float:left;padding:0; margin-right:10px; line-height:30px; height:30px; width:65px; text-align:center;}
.content
{ float:none; padding-top:30px; border:solid 1px black; clear:both; }
.content div
{ border-top:0px; height:60px;}
.tab_selected
{ border-left:solid 1px black; background-color:#ffffff; border-right:solid 1px black; border-top:solid 1px black; border-bottom:0px; bottom:-1px; position:relative; z-index:1}
.tab_current
{ text-decoration:underline;}
</style>
<script language="javascript" type="text/javascript">
$(
function() {
$(
".content div:gt(0)").hide();
$(
".tab li").css("cursor", "pointer");
$(
".tab li").hover(function() {
$(
this).addClass("tab_current");
},
function() {
$(
this).removeClass("tab_current");
}).click(
function() {
$(
this).addClass("tab_selected").siblings().removeClass("tab_selected");
$(
".content div").eq($(this).index()).siblings().hide().end().show();
}
)
}
);
</script>
</head>
<body>
<div id="container">
<div class="tab">
<ul>
<li class="tab_selected">选项卡A</li>
<li>选项卡B</li>
<li>选项卡C</li>
</ul>
</div>
<div class="content">
<div>内容一</div>
<div>内容二</div>
<div>内容三</div>
</div>
</div>
</body>
</html>

 

收获园豆:15
artwl | 专家六级 |园豆:16526 | 2010-11-18 17:40
其他回答(2)
0

$(".more_info_tabs a").click(function(){$(".more_info_sheets div").css("display",'none');$(this.attr("href")).css("display","block");})

I,Robot | 园豆:9563 (大侠五级) | 2010-11-18 17:33
好像不够简洁
支持(0) 反对(0) I,Robot | 园豆:9563 (大侠五级) | 2010-11-18 17:34
0

司徒妹妹发的一个很简洁的tab插件,参考url

http://www.cnblogs.com/rubylouvre/archive/2010/09/21/1831444.html

三桂 | 园豆:3565 (老鸟四级) | 2010-11-19 18:10
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册