滑动开关按钮

本篇文章的滑动开关按钮主要是使用了CSS3的过渡效果实现的。有兴趣的朋友可以参考一下_w3school_的过渡效果用法。

html文件（index.html）

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8' />
	<title>滑动开关按钮</title>
	<style type="text/css">
	body {
		text-align: center;
	}
	.wrap{
		display: inline-block;
		position: relative;
		margin:100px auto;
		height:70px;
		border-radius:50px;
		background-color:#DCDCDC;
		z-index: 1;
	}
	.text{
		position: relative;
		height:70px;
		line-height: 70px;
		width: 100px;
		float:left;
		display: inline-block;
		box-sizing:border-box;
		font-size: 30px;
		color:#5A5A5A;
		text-align: center;
		z-index: 3;
	}
	.text.one{
		color:#F95050;
	}
	.button{
		position: absolute;
		height:68px;
		width: 98px;
		margin:1px;
		display: inline-block;
		box-sizing:border-box;
		background-color: #fff;
		border-radius:50px;
		left: 0;
		z-index: 2;
		transition:left 1s;
		-moz-transition:left 1s; /* Firefox 4 */
		-webkit-transition:left 1s; /* Safari and Chrome */
		-o-transition:left 1s; /* Opera */
	}
	</style>
</head>
<body>
	<div class='wrap'>
		<span class='text one' onclick='homeText()'>首页</span>
		<span class='text two' onclick='introduceText()'>介绍</span>
		<span class='text three' onclick='discussText()'>讨论</span>
		<span class='button'></span>
	</div>
	<script type="text/javascript">
	var homeText = function(){
		document.querySelectorAll('.button')[0].style.left = '0px';
		document.querySelectorAll('.text.one')[0].style.color = '#F95050';
		document.querySelectorAll('.text.two')[0].style.color = '#5A5A5A';
		document.querySelectorAll('.text.three')[0].style.color = '#5A5A5A';
	}
	var introduceText = function(){
		document.querySelectorAll('.button')[0].style.left = '100px';
		document.querySelectorAll('.text.two')[0].style.color = '#F95050';
		document.querySelectorAll('.text.one')[0].style.color = '#5A5A5A';
		document.querySelectorAll('.text.three')[0].style.color = '#5A5A5A';
	}
	var discussText = function(){
		document.querySelectorAll('.button')[0].style.left = '200px';
		document.querySelectorAll('.text.three')[0].style.color = '#F95050';
		document.querySelectorAll('.text.one')[0].style.color = '#5A5A5A';
		document.querySelectorAll('.text.two')[0].style.color = '#5A5A5A';
	}
	</script>
</body>
</html>

js修改样式的方法

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8' />
	<title>滑动开关按钮</title>
	<style type="text/css">
	body {
		text-align: center;
	}
	.wrap{
		display: inline-block;
		position: relative;
		margin:100px auto;
		height:70px;
		border-radius:50px;
		background-color:#DCDCDC;
		z-index: 1;
	}
	.text{
		position: relative;
		height:70px;
		line-height: 70px;
		width: 100px;
		float:left;
		display: inline-block;
		box-sizing:border-box;
		font-size: 30px;
		color:#5A5A5A;
		text-align: center;
		z-index: 3;
	}
	.text.active{
		color:#F95050;
	}
	.button{
		position: absolute;
		height:68px;
		width: 98px;
		margin:1px;
		display: inline-block;
		box-sizing:border-box;
		background-color: #fff;
		border-radius:50px;
		left: 0;
		z-index: 2;
		transition:left 1s;
		-moz-transition:left 1s; /* Firefox 4 */
		-webkit-transition:left 1s; /* Safari and Chrome */
		-o-transition:left 1s; /* Opera */
	}
	</style>
</head>
<body>
	<div class='wrap'>
		<span class='text active' data-index='0' onclick='activeClick(this)'>首页</span>
		<span class='text' data-index='1' onclick='activeClick(this)'>介绍</span>
		<span class='text' data-index='2' onclick='activeClick(this)'>讨论</span>
		<span class='button'></span>
	</div> 
	<script type="text/javascript">
	var activeClick = function(dom){
		// console.log(dom.getAttribute("data-index"));
		// console.log(dom.dataset.index);
		var textArr = document.querySelectorAll('.text');
		var slideButton = document.querySelectorAll('.button')[0];
		var index = dom.dataset.index;

		slideButton.style.left = 100 * index + 'px';
		for(var i = 0 ;i < textArr.length;i++){
			textArr[i].classList.remove('active');
		}
		dom.classList.add('active');
	}
	</script>
</body>
</html>