原生js和jquery两种方式实现tab切换

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>原生js实现tab切换</title>

<style>

ul{

list-style:none

}

li{

float:left;

border:1px solid deeppink;

width:100px;

height:100px;

}

.bgc{

background:deepskyblue;

}

</style>

</head>

<body>

<ul>

<li class="bgc"></li>

<li></li>

<li></li>

<li></li>

</ul>

<script>

var obj=document.getElementsByTagName("li");\

var i=0;len=obj.length;

for(;i<len;i++){

obj[i].οnclick=clickHandle;

}

function clickHandle(){

var j=0;

for(;j<len;j++){

obj[j].removeAttribute("class");

}

this.addAttribute("class","bgc");

}

</script>

</body>

</html>

//==============华丽的分割线========================

$("li").each(function(i,v){

$(v).click(function(i,v){

$(this).addClass("bgc").removeClass("bgc");

})

})










评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值