淘宝上这种三种状态样式是如何实现的-HTML教程-爱易网页

淘宝上这种三种状态样式是如何实现的

日期：2014-05-16　浏览次数：20658 次

淘宝上这种三种状态样式是怎么实现的

------解决方案--------------------
第一个是自定义的默认样式
第二个是鼠标经过 a:hover 的样式
第三个是点击后的样式，可以用js或jq或ajax
看自己习惯使用
------解决方案--------------------
示例

<!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" />

<title>无标题文档</title>

<style>

ul{margin:0;padding:0;list-style:none;}

a{text-decoration:none;}

.menu{width:400px;margin:100px auto;}

.menu li{float:left;margin-left:20px;display:inline;height:40px; vertical-align:top; position:relative;}

.menu li a{float:left;height:38px;border:solid 1px #ccc;;padding:0 10px;line-height:38px;}

.menu li a:hover,.menu li a.active{ border-width:2px;margin:-1px;border-color:red;}

.menu li i{text-indent:-999px;position:absolute;bottom:0;right:0;width:10px;height:10px;background:red;display:none;}

</style>

<script>

window.onload=function()

{

	

	var oUl=document.getElementById('list');

	var aLink=oUl.getElementsByTagName('a');

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

	{

		aLink[i].onclick=function()

		{

			var oI=this.parentNode.getElementsByTagName('i')[0];

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

			{

				aLink[i].parentNode.getElementsByTagName('i')[0].style.display='none';

				aLink[i].className='';

			}

			oI.style.display='block';

			this.className='active';

		}

	}

	

}



</script>

</head>

<body>

<ul class="menu" id="list">

    <li><a href="#">1</a><i>已选中</i></li>

    <li><a href="#">2</a><i>已选中</i></li>

    <li><a href="#">3</a><i>已选中</i></li>

</ul>

<div></div>

</body>

</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

淘宝上这种三种状态样式是如何实现的

相关资料更多>

推荐阅读更多>