Question

html li标签点击后隐藏右边border属性

改变成这样---->>





Answer 1

<style>
			*{margin: 0;padding: 0;list-style: none;}
			body{background: #f5f5f5;}
			section{overflow: hidden;margin:100px 0 0 200px;}
			ul{float: left;width: 140px;border-right:1px #dddddd solid;}
			ul li{color:#0088cc;padding: 8px 20px;text-align: center;cursor: pointer;position: relative;right: -1px;border: 1px solid #f5f5f5;border-right:none;}
			.selected{color:#000;background: #fff;border: 1px solid #ddd;border-right:none;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
			#content{float: left;width: 60%;margin-left: 50px;}
		</style>
		<section>
			<ul>
				<li class="selected">基本资料</li>
				<li>我的标签</li>
				<li>我的头像</li>
			</ul>
			<div id="content">
				<h1>内容区</h1>
			</div>
		</section>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script>
			$(function(){
				$("ul li").click(function(){
					$("ul li").removeClass("selected");
					$(this).addClass("selected");
				})
			})
		</script>