选项卡变化

来源：互联网发布：微信数据转移到sd卡编辑：程序博客网时间：2024/05/07 05:04

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>选项卡</title> <link type="text/css" rel="stylesheet" href="css/layout.css" /> </head> <body> <!--整体构局说明，用ul完成按钮的横向布局，用div完成三个内容框架的垂直布局（类似于类表），然后将三个内容框架全隐藏，通过下面的:first-child属性只将第一个框架内容显示出来--> <div class="tab"> <div class="tab_menu"> <ul> <li class="on">实事</li> <li>政治</li> <li>体育</li> </ul> </div> <div class="tab_box"> <div>实事内容</div> <div>政治内容</div> <div>体育内容</div> </div> </div> <script type="text/javascript" src="js/jquery-1.11.3.js"></script> <script type="text/javascript" src="js/layout.js"></script> </body></html>

$(function(){ $(".tab_menu ul li").click(function(){ $(this).addClass("on").siblings().removeClass("on"); //切换选中的按钮高亮状态 var index=$(this).index(); //获取被按下按钮的索引值，需要注意index是从0开始的 $(".tab_box > div").eq(index).show().siblings().hide(); //在按钮选中时在下面显示相应的内容，同时隐藏不需要的框架内容 });});

阅读全文

0 0