动态加载CSS样式

姚华军

已于 2022-06-24 13:57:58 修改

阅读量2.3k

点赞数

分类专栏：前端相关文章标签： css 动态加载

于 2020-02-04 21:16:46 首次发布

本文链接：https://blog.csdn.net/yhj_911/article/details/104175277

版权

前端相关专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
	<style>
		*{margin: 0;padding: 0;}
		div{
			min-height: 700px;
		}
		.main{
			width: 80%;
			height: auto;
			min-height: 700px;
			margin: 0 auto;
		}
		.left,.right{
			border: 1px solid #bbbbbb;
		}
		.left{
			width: 15%;
			height: auto;
			float: left;
		}
		.right{
			width: 80%;
			height: auto;
			float: right;
		}
		ul{
			list-style: none;
			line-height: 50px;
		}
		.left ul li{
			border-bottom: 1px solid #bbbbbb;
			padding-left: 50px;
		}
		.right ul{
			padding: 10px 40px;
		}
		.right ul li{
			border-bottom: 1px dashed #bfbfbf;
		}
		.active{
			background-color: #00a0e9;
			color: #fff;
		}
		.right ul li span{
			float: right;
			padding-right: 10px;
		}
	</style>
</head>
<body>
<div class="main">
	<div class="left">
		<ul>
			<li class="active">政策动态</li>
			<li>协会动态</li>
			<li>访谈报告</li>
			<li>能源会议</li>
		</ul>
	</div>
	<div class="right">
		<ul>
			<li>关于印发《政策性质的通知》<span>2018-08-23</span></li>
			<li>关于印发《政策性质的通知》<span>2018-08-23</span></li>
			<li>关于印发《政策性质的通知》<span>2018-08-23</span></li>
			<li>关于印发《政策性质的通知》<span>2018-08-23</span></li>
			<li>关于印发《政策性质的通知》<span>2018-08-23</span></li>
			<li>关于印发《政策性质的通知》<span>2018-08-23</span></li>
			<li>关于印发《政策性质的通知》<span>2018-08-23</span></li>
			<li>关于印发《政策性质的通知》<span>2018-08-23</span></li>
		</ul>
	</div>
</div>
<script>
	$(".left ul").on("click","li",function(){
		$(".left ul li").removeClass("active");
		$(this).addClass("active");
	});
</script>
</body>
</html>

姚华军

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
动态加载CSS样式

<!DOCTYPE html><head> <meta charset="UTF-8"> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <style> *{margin: 0;padding: 0;} div{ min...
复制链接

扫一扫