js实现tab栏切换效果

本文实例为大家分享了js实现tab栏切换效果的具体代码,供大家参考,具体内容如下效果展示:源码展示:<!doctypehtml><h

本文实例为大家分享了js实现tab栏切换效果的具体代码,供大家参考,具体内容如下

效果展示:

WordPress主题下载,WordPress免费主题下载,网站源码模板下载

源码展示:

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>js实现tab栏切换</title>

<style>

* {

margin: 0;

margin: 0;

padding: 0;

list-style: none;

}

 

.nav {

width: 100%;

height: 50px;

}

 

.nav ul {

width: 600px;

height: 50px;

margin: 0 auto;

}

 

.nav ul li {

width: 120px;

height: 50px;

font-weight: 800;

font-size: 18px;

color: #515151;

line-height: 50px;

text-align: center;

float: left;

cursor: pointer;

}

 

.tiao {

width: 600px;

height: 5px;

background-color: #515151;

margin: 0 auto;

position: relative;

top: 0;

left: 0;

}

 

.zhou {

width: 120px;

height: 5px;

background-color: red;

position: absolute;

top: 0;

left: 0;

}

 

.ww {

width: 0px;

border-width: 8px;

border-style: solid;

border-color: rgba(250, 0, 255, 0) rgba(250, 0, 255, 0) red rgba(250, 0, 255, 0);

position: absolute;

top: -16px;

left: 56px;

}

 

.nei {

width: 600px;

height: 300px;

margin: 0 auto;

}

 

.nei li {

width: 600px;

height: 300px;

color: #fff;

font-family: “微软雅黑”;

font-size: 40px;

text-align: center;

line-height: 300px;

display: none;

margin-top: 10px;

}

</style>

</head>

<body>

<div class=”nav”>

<ul>

<li onmouseover=”don(0)”>大娃</li>

<li onmouseover=”don(1)”>二娃</li>

<li onmouseover=”don(2)”>三娃</li>

<li onmouseover=”don(3)”>四娃</li>

<li onmouseover=”don(4)”>五娃</li>

 

</ul>

</div>

 

<div class=”tiao”>

<div id=”zhou” class=”zhou” style=”left: 0;”>

<div class=”ww”></div>

</div>

</div>

 

<div id=”nei” class=”nei”>

<ul>

<li style=”background-color:#e4007f; display: block;”>大娃出世</li>

<li style=”background-color:#687de8″>二娃出世</li>

<li style=”background-color:#2fb936″>三娃出世</li>

<li style=”background-color:#4dd5d0″>四娃出世</li>

<li style=”background-color:#e24759″>五娃出世</li>

</ul>

</div>

 

<script>

var k;

var kk = 0;

 

function don(gh) {

if (kk == 0) {

kk = 1

var w1 = document.getElementById(‘zhou’)

var t = parseInt(w1.style.left)

 

if (t < gh * 120) {

k = window.setInterval(

function () {

goright(gh * 120)

}, 30

)

} else if (t > gh * 120) {

k = window.setInterval(

function () {

goleft(gh * 120)

}, 30

)

} else {

kk = 0

}

var w2 = document.getElementById(‘nei’).getElementsByTagName(‘li’)

for (var i = 0; i < w2.length; i++) {

w2[i].style.display = “none”

}

w2[gh].style.display = “block”

}

}

 

//右移动

function goright(gh1) {

var w1 = document.getElementById(‘zhou’)

var t = parseInt(w1.style.left)

t += 20

 

if (t >= gh1) {

t = gh1

window.clearInterval(k)

kk = 0

}

w1.style.left = t + “px”

}

 

//左移动

function goleft(gh1) {

var w1 = document.getElementById(‘zhou’)

var t = parseInt(w1.style.left)

t -= 20

//alert(t)

if (t <= gh1) {

t = gh1

window.clearInterval(k)

kk = 0

}

w1.style.left = t + “px”

}

</script>

<hr>

<pre style=”color:red”>

感: 最近贡献一下我在教学中的小案例可以能给你一些帮助 ,希望继续关注我的博客

 

–王

</pre>

 

</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

WordPress主题下载,WordPress免费主题下载,网站源码模板下载


下载说明:
1. 本站所有资源来源于网络和用户上传,如有侵权请联系站长
2. 本站分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

本站的资源均来自于互联网,仅为资源共享、学习参考之目的,其版权均归原作者及其网站所有,如有侵权请留言联系:admin,转转请注明出处:http://zhanmr.com/7060.htm

发表评论

邮箱地址不会被公开。 必填项已用*标注