<html>
<meta charset="utf-8">
<head>
<style>
*{margin:0;padding:0}
.select_muto{margin:auto;width:200px;}
.select_list ul li{list-style:none;float:left;border:1px solid #ccc;width:50px;text-align:center;margin-left:10px;line-height:20px;border-bottom:none;cursor:pointer;}
.select_con{clear:both;border:1px solid #ccc;width:200px;height:200px;margin-left:10px;}
.con{display:none;}
.list{background:#aaa;}
.st{background:#a90}
</style>
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
$(".select_list ul li").click(function(){
var $index=$(this).index();
$(".select_con div").eq($index).show().siblings().hide();
$(this).addClass("list").siblings().removeClass("list");
}).hover(function(){
$(this).addClass("st").siblings().removeClass("st");
},function(){
$(this).removeClass("st");
});
})
</script>
</head>
<body>
<div class="select_muto">
<div class="select_list">
<ul>
<li class="list">事件</li>
<li>新闻</li>
<li>体育</li>
</ul>
</div>
<div class="select_con">
<div>事件</div>
<div class="con">新闻</div>
<div class="con">体育</div>
</div>
</div>
</body>
</html>
<meta charset="utf-8">
<head>
<style>
*{margin:0;padding:0}
.select_muto{margin:auto;width:200px;}
.select_list ul li{list-style:none;float:left;border:1px solid #ccc;width:50px;text-align:center;margin-left:10px;line-height:20px;border-bottom:none;cursor:pointer;}
.select_con{clear:both;border:1px solid #ccc;width:200px;height:200px;margin-left:10px;}
.con{display:none;}
.list{background:#aaa;}
.st{background:#a90}
</style>
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
$(".select_list ul li").click(function(){
var $index=$(this).index();
$(".select_con div").eq($index).show().siblings().hide();
$(this).addClass("list").siblings().removeClass("list");
}).hover(function(){
$(this).addClass("st").siblings().removeClass("st");
},function(){
$(this).removeClass("st");
});
})
</script>
</head>
<body>
<div class="select_muto">
<div class="select_list">
<ul>
<li class="list">事件</li>
<li>新闻</li>
<li>体育</li>
</ul>
</div>
<div class="select_con">
<div>事件</div>
<div class="con">新闻</div>
<div class="con">体育</div>
</div>
</div>
</body>
</html>
1103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
