页面部分
<link href="xxk.css" rel="stylesheet" type="text/css" />
</script>
<script src="xxk.js"></script>
</head>
<body>
<div id="div1">
<input type="button" value="古装" class="on"/>
<input type="button" value="言情" />
<input type="button" value="仙侠" />
<input type="button" value="悬疑" />
<div class="on"><br/>陆小凤之凤舞九天<br/><br/>倚天屠龙记<br/><br/>小李飞刀</div>
<div><br/>魔女幼熙<br/><br/>蓝色大海的传说<br/><br/>太阳的后裔</div>
<div><br/>仙剑奇侠传<br/><br/>三生三世十里桃花<br/><br/>西游记</div>
<div><br/>他来了请闭眼<br/><br/>福尔摩斯传<br/><br/>嫌疑人X</div>
</div>
</body>
</html>
css部分
*{ margin:0px; padding:0px; text-decoration:none; list-style:none;}
#div1 input.on{ background:yellow;}
#div1 div.on{ display:block;}
#div1 div{ width:300px; height:250px; display:none; background:#CCC;}
js部分
$(function(){
$('#div1 input').click(function(){
var index=$('#div1 input').index(this);
$('#div1 input').removeClass("on").eq(index).addClass("on");
$("#div1 div").removeClass("on").eq(index).addClass("on");
})
})