css锚点链接简单实现点击更换内容的方法

鹏仔工作室

于 2019-02-01 12:07:38 发布

阅读量2.6k

点赞数

分类专栏：前端

前端共享博客 http://sharedbk.com

本文链接：https://blog.csdn.net/tianpeng1996/article/details/86737951

版权

前端专栏收录该内容

105 篇文章 2 订阅

订阅专栏

原文 http://www.sharedblog.cn/?post=65

共享博客

CSS代码


<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.box{
		width: 360px;
		height: 140px;
		border: 10px solid #a7a6a6;
	}
	.box_one{
		width: 300px;
		height: 140px;
		float: left;
		overflow: hidden;
		background: #fff;
	}
	.box_two{
		width: 60px;
		height: 140px;
		float: right;
		z-index: 2;
		text-align: center;
	}
	.box_two a{
		width: 60px;
		height: 46px;
		display: block;
		background: black;
		color: #fff;
		line-height: 46px;
		text-decoration: none;
		border-bottom: 1px solid #fff;
	}
	.box_two .box_three{
		border-bottom: none;
	}
	.box_two a:hover{
		background: red;
	}
	.uls{
		width: 300px;
		height: 140px;
		list-style: none;
		padding: 10px;
		background: url(img/jiant.gif) no-repeat;
	}
	.uls li{
		background: url(img/icon.jpg) no-repeat left center;
		padding-left: 20px;
		line-height: 20px;
		font-size: 12px;
	}
	#uls_one{
		background-position: 247px 15px;
	}
	#uls_two{
		background-position: 247px 62px;
	}
	#uls_three{
		background-position: 247px 111px;
	}
</style>

HTML代码

<body>
	<div class="box">
		<div class="box_one">
			<ul class="uls" id="uls_one">
				<li>娱乐娱乐娱乐娱乐</li>
				<li>娱乐娱乐娱乐娱乐</li>
				<li>娱乐娱乐娱乐娱乐</li>
				<li>娱乐娱乐娱乐娱乐</li>
				<li>娱乐娱乐娱乐娱乐</li>
				<li>娱乐娱乐娱乐娱乐</li>
			</ul>
			<ul class="uls" id="uls_two">
				<li>羽毛球羽毛球羽毛球</li>
				<li>羽毛球羽毛球羽毛球</li>
				<li>羽毛球羽毛球羽毛球</li>
				<li>羽毛球羽毛球羽毛球</li>
				<li>羽毛球羽毛球羽毛球</li>
				<li>羽毛球羽毛球羽毛球</li>
			</ul>
			<ul class="uls" id="uls_three">
				<li>新闻新闻新闻新闻</li>
				<li>新闻新闻新闻新闻</li>
				<li>新闻新闻新闻新闻</li>
				<li>新闻新闻新闻新闻</li>
				<li>新闻新闻新闻新闻</li>
				<li>新闻新闻新闻新闻</li>
			</ul>
		</div>
		<div class="box_two">
			<a href="#uls_one">娱乐</a>
			<a href="#uls_two">体育</a>
			<a class="box_three" href="#uls_three">新闻</a>
		</div>
	</div>
</body>