您的位置：首页 > Web前端 > JQuery

jquery实现选项卡功能

2017-07-27 08:54 429 查看

页面部分

<link href="xxk.css" rel="stylesheet" type="text/css" />

<script src="jquery-1.12.4.js">

</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");
})

})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航