大致效果如图
下面是代码：自己导入jQuery包。
样式：
body,ul,li,div,a{margin:0px;padding:0px;}
body{margin-top:10px;margin-left:15px;}
#all{border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;width:255px;}
#title li{float:left;list-style:none;width:50px;border-top:2px solid #f60;border-right:1px solid #ccc;text-align:center;
padding-top:3px;}
#title li:last-child{border-right:1px solid #fff;}
.new{border-bottom:1px solid #fff;color:#f60;}
.old{border-bottom:1px solid #ccc;}
#content{clear:both;}
#content ul{margin-left:5px;list-style:none;float:left;}
#content li{width:40px;height:30px;background-color:#f60;text-align:center;color:#fff;}
.inContent{width:205px;height:90px;background-color:#f6c;margin-left:50px;}
js代码：
$(function(){
$("#title li:first").addClass("new").siblings().addClass("old");
$("#content div:first").show().siblings().hide();
$(".inContent:first").show().siblings().hide();
$("#title li").click(function(){
$(this).addClass("new").removeClass("old").siblings().addClass("old").removeClass("new");
$(".info").hide().eq($("#title li").index(this)).show();
$(".info div:first-child").show().siblings().hide();
});
$(".info li").mouseover(function(){
$(this).css("color","#20f");
$(".inContent").hide().eq($(".info li").index(this)).show();
});
$(".info li").mouseout(function(){
$(this).css("color","#fff");
});
});
html结构：
- 要闻
- 国内
- 时尚
- 旅游
- 科技
- 01
- 02
- 03
1aaa看你是些在li标签里面还是些在li 的a标签里面如果是1aaa1bbb看你是些在li标签里面还是些在li 的a标签里面如果是1bbb1ccc看你是些在li标签里面还是些在li 的a标签里面如果是1ccc
- 01
- 02
- 03
2aaa看你是些在li标签里面还是些在li 的a标签里面如果是1aaa2bbb看你是些在li标签里面还是些在li 的a标签里面如果是1bbb2ccc看你是些在li标签里面还是些在li 的a标签里面如果是1ccc
- 01
- 02
- 03
3aaa看你是些在li标签里面还是些在li 的a标签里面如果是3aaa3bbb看你是些在li标签里面还是些在li 的a标签里面如果是3bbb3ccc看你是些在li标签里面还是些在li 的a标签里面如果是3ccc
- 01
- 02
- 03
4aaa看你是些在li标签里面还是些在li 的a标签里面如果是4aaa4bbb看你是些在li标签里面还是些在li 的a标签里面如果是4bbb4ccc看你是些在li标签里面还是些在li 的a标签里面如果是4ccc
- 01
- 02
- 03
5aaa看你是些在li标签里面还是些在li 的a标签里面如果是5aaa5bbb看你是些在li标签里面还是些在li 的a标签里面如果是5bbb5ccc看你是些在li标签里面还是些在li 的a标签里面如果是5ccc