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

JavaScript 复选框全选效果&JQuery 实现简单的tab切换效果

2014-03-22 08:20 1216 查看
JavaScrip实现复选框全选的关键代码！

function checkall(){

varstr=document.getElementsByName("p");

for(vari=0;i<str.length;i++){

str[i].checked=document.getElementById("all").checked;

}

}

------------------------------------------------------------------------------------------------------

单击实现切换

<html>

<head>

<title></title>

<scripttype="text/javascript"src="../js/jquery-1.8.3.js"></script>

<scripttype="text/javascript">

$(document).ready(function(){

$("#tabtopul li").click(function(){

$(this).addClass("on");

$(this).siblings("li").removeClass("on");

$(".content").hide();

$(".content").eq($(this).index()).show(1000);

});

});

</script>

<style>

ul{

list-style:none;

}

ulli{

display:inline;

margin-left:10px;

}

.on{

border:1pxsolid red;

border-top:2pxsolid blue;

border-bottom:none;

background-color:gray;

}

</style>

</head>

<body>

<div>

<divid="tabtop">

<ul>

<liclass="on">我的订单</li>

<li>我的团购</li>

</ul>

</div>

<divclass="content">

<imgsrc="../images/spring.jpg">//图片路径

</div>

<divclass="content" style="display:none">

<imgsrc="../images/summer.jpg">//图片路径

</div>



</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航