请教一段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>
两个选项卡点击切换，麻烦路过的朋友指点一下。
最佳答案
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
其他回答(2)
0
$(".more_info_tabs a").click(function(){$(".more_info_sheets div").css("display",'none');$(this.attr("href")).css("display","block");})
好像不够简洁
0
