jquery选项卡

来源:互联网 发布:淘宝靠谱电玩店 编辑:程序博客网 时间:2024/05/22 15:18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <script class="jquery library" src="js/jquery-1.8.2.min.js" type="text/javascript"></script>    <title>jquery选项卡</title></head><style>#div1 div{ width:200px; height:200px; border:1px red solid; display:none;}.active{ background:red;}</style><script type="text/javascript">$(function () {    $("#div1").find("input").click(function () {             $('#div1').find('input').attr("class","")             $("#div1").find("div").css("display","none")            $(this).attr("class","red")            $('#div1').find('div').eq( $(this).index() ).css('display','block');    })})</script><body><div id="div1">    <input class="active" type="button" value="1" />    <input type="button" value="2" />    <input type="button" value="3" />    <div style="display:block">111111</div>    <div>222222</div>    <div>333333</div></div></body></html>
原创粉丝点击