Jquery 实现的选项卡切换
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="./css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script language="javascript">
jQuery.noConflict();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<script type="text/javascript">
jQuery(function(){ //首页选项卡切换效果
jQuery(".changxiao span").mouseover(function(){
var index_tab = jQuery(this).parent().children().index(jQuery(this)); //选项卡的索引值
jQuery(this).parent().find(".current").removeClass("current"); //选项卡背景处理
jQuery(this).addClass("current");
var content_obj = jQuery(this).parent().parent().find(".CXbottom").children(); //内容节点
content_obj.hide();
content_obj.eq(index_tab).show();
});
});
</script>
<div class="sidecolumn mt10">
<div class="SCtop">
<h2>小家畅销电排行榜</h2>
</div>
<div class="SCbottom">
<div class="changxiao">
<div class="CXtop">
<span class="current">水世界</span>
<span class="" >厨房世界</span>
<span class="" >生活电器</span>
<div class="clear"></div>
</div>
<div class="CXbottom">
<div class="CXB1" style=" display:;">
<ul>
<?
$GLOBALS['smarty']->assign('ds',get_sale_rank(6,37));
?>
</ul>
</div>
<div class="CXB2" style=" display:none;">
<ul>
<?
$GLOBALS['smarty']->assign('ds',get_sale_rank(6,38));
?>
</ul>
</div>
<div class="CXB3" style=" display:none;">
<ul>
<?
$GLOBALS['smarty']->assign('ds',get_sale_rank(6,99));
?>
</ul>
</div>
</div>
</div>
</div>
</div>
浙公网安备 33010602011771号