html li标签默认选择第几个的问题

jasonhu2 2014-12-09 11:49:24

<!DOCTYPE html>

<html>

<head>

<title></title>

<script type="text/javascript">

		$(function () {

			

			$("#nav-gxb").addClass("active");

			

			$(window).scroll(function(){

				

				if($(window).scrollTop() >= $("#header").height()){

					

					$("#aboutUl").css({"position": "fixed", "top": "0px"});

					

				} else { $("#aboutUl").css({"position": ""}); }

			});

			

			$("#aboutUl li").on("click", function(){

				

				$(this).addClass("active").siblings().removeClass("active");

				

				var newIndex = $(this).index();

				

				var newDiv = $("#aboutContent > div").eq(newIndex);

				

				$("#aboutContent").height(newDiv.height());

				

				newDiv.siblings().animate({"left": "720px", "opacity": 0}, 500);

				

				newDiv.animate({"left": "0px", "opacity": 1}, 500);

			

			});

		});

		

	</script>

	<style>

		#aboutUl { width: 260px; font: 1.2em '微软雅黑'; color: #666666; }

		#aboutUl li { cursor: pointer; height: 35px; line-height: 35px; border-left: 4px solid #FFF; padding-left: 



10px; border-bottom: 1px solid #F1F1F1; }

		#aboutUl li.active, #aboutUl li:hover { color: #FF9C00; border-left: 4px solid #FF9C00; }

		#aboutUl li:hover{background-color: #EBF0FE; }

		#aboutContent { width: 720px; position: relative; height: 500px; overflow: hidden;}

		#aboutContent > div { width: 100%; position: absolute; left: 0px; }

		#aboutContent > div + div { left: 720px;}

		#aboutContent > div h2 { text-align: center; color: #555555; font-size: 1.3em; padding-top: 10px; }

		#aboutContent > div h3 { margin-top: 8px; padding: 8px; }

		#aboutContent > div h4 { text-align: center; margin-top: 10px; font-size: 15px; }

		#aboutContent > div span { display: block; color: #FF6600; margin-top: 8px; padding: 10px; }

		#aboutContent > div p { font-size: 14px; text-indent: 2em; line-height: 23px; margin-top: 8px; color: 



#666666; padding: 10px; }

		#aboutContent > div > div { text-align: right; margin: 40px; padding-bottom: 40px; line-height: 23px; }

		#li1 { background-color: #F3F3F3; }

		#li2 { background-color: #EBF0FE; }

		#li3 { background-color: #FFF8F1; }

		#li4 { background-color: #F6F6F6; }

	</style>

</head>

<body>

	<div class="floatWrap" >

		<ul id="aboutUl" class='float-left'>

            <p style="font-weight:bold; background:#ebfafa; height:45px; line-height:45px; font-size:18px; padding-left: 



10px;">1111</p>

            <li class='active'>2222</li>

            

	    <p style="font-weight:bold; background:#ebfafa; height:45px; line-height:45px; font-size:18px; padding-left: 



10px;">3333</p>

            <li>4444</li>

            

		</ul>

		<div id='aboutContent' class='float-right'>

                        <div id="li1">1</div>            

                        <div id="li2">2</div>

                        <div id="li3">3</div>

                        <div id="li4">4</div>

            

		</div>

	</div>

</body>

</html>