样式更改不了

「已注销」 2012-11-29 07:31:49



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

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<style type="text/css">

*{padding:0px; margin:0px;}

body{font-size:14px;}

img{border:0px;}

.nav{ margin:10px;}

.nav ul{list-style-type:none;}

.nav ul li{float:left;}

.nav ul li a{display:block; float:left; color:#fff; text-align:center; text-decoration:none;}

.nav ul li a.hove1:link{background:url(images/bg.png) 0px 0px no-repeat; width:71px;}

.nav ul li a.hove2:link{background:url(images/bg.png) -74px 0px no-repeat; width:41px;}

.nav ul li a.hove3:link{background:url(images/bg.png) -118px 0px no-repeat; width:74px;}

.nav ul li a.hove4:link{background:url(images/bg.png) -195px 0px no-repeat; width:70px;}

.nav ul li a.hove5:link{background:url(images/bg.png) -268px 0px no-repeat; width:55px;}

.nav ul li a.hove1:visited{background:url(images/bg.png) 0px -20px no-repeat;}

.nav ul li a.hove2:visited{background:url(images/bg.png) -74px -20px no-repeat;}

.nav ul li a.hove3:visited{background:url(images/bg.png) -118px -20px no-repeat;}

.nav ul li a.hove4:visited{background:url(images/bg.png) -195px -20px no-repeat;}

.nav ul li a.hove5:visited{background:url(images/bg.png) -268px -20px no-repeat;}

.nav ul li a.hove1:hover{background:url(images/bg.png) 0px -20px no-repeat;}

.nav ul li a.hove2:hover{background:url(images/bg.png) -74px -20px no-repeat;}

.nav ul li a.hove3:hover{background:url(images/bg.png) -118px -20px no-repeat;}

.nav ul li a.hove4:hover{background:url(images/bg.png) -195px -20px no-repeat;}

.nav ul li a.hove5:hover{background:url(images/bg.png) -268px -20px no-repeat;}

.nav ul li a.hove1:active{background:url(images/bg.png) 0px -40px no-repeat;}

.nav ul li a.hove2:active{background:url(images/bg.png) -74px -40px no-repeat;}

.nav ul li a.hove3:active{background:url(images/bg.png) -118px -40px no-repeat;}

.nav ul li a.hove4:active{background:url(images/bg.png) -195px -40px no-repeat;}

.nav ul li a.hove5:active{background:url(images/bg.png) -268px -40px no-repeat;}

.a{background:url(images/bg.png) 0px -40px no-repeat;width:71px;}

.b{background:url(images/bg.png) -74px -20px no-repeat;width:41px;}

.c{background:url(images/bg.png) 118px -20px no-repeat;width:74px;}

.d{background:url(images/bg.png) -195px -20px no-repeat;width:70px;}

.e{background:url(images/bg.png) -268px -20px no-repeat;width:55px;}

</style>

</head>

<body>

<div class="nav">

	<ul>

		<li><a href="javascript:;" class="hove1" onclick="a()" id="a">Free Gift </a></li>

		<li><a href="javascript:;" class="hove2" onclick="b()" id="b" >Play</a></li>

		<li><a href="javascript:;" class="hove3" onclick="c()" id="c">Add Friend</a></li>

		<li><a href="javascript:;" class="hove4" onclick="d()" id="d">Add Cash</a></li>

		<li><a href="javascript:;" class="hove5" onclick="e()" id="e">Help</a></li>

	</ul>

</div>

<script>

function a()

{

	$('#a').removeClass('hove1');

	$('#a').removeClass('b');

	$('#a').removeClass('c');

	$('#a').removeClass('d');

	$('#a').removeClass('e');

	$('#a').addClass('a');

}

function b()

{

	$('#b').removeClass('hove2');

	$('#b').addClass('b');

	$('#b').removeClass('a');

	$('#b').removeClass('c');

	$('#b').removeClass('d');

	$('#b').removeClass('e');

}

function c()

{

	$('#c').removeClass('hove3');

	$('#c').addClass('c');

	$('#c').removeClass('b');

	$('#c').removeClass('a');

	$('#c').removeClass('d');

	$('#c').removeClass('e');

}

function d()

{

	$('#d').removeClass('hove4');

	$('#d').removeClass('b');

	$('#d').removeClass('c');

	$('#d').removeClass('a');

	$('#d').removeClass('e');

	$('#d').addClass('d');

}

function e()

{

	$('#e').removeClass('hove5');

	$('#e').addClass('e');

	$('#e').removeClass('b');

	$('#e').removeClass('c');

	$('#e').removeClass('d');

	$('#e').removeClass('a');

}

</script>

</body>

</html>