HBuilder-table切换

最新推荐文章于 2023-03-17 11:16:12 发布

妮可珍郝坎

最新推荐文章于 2023-03-17 11:16:12 发布

阅读量215

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/nikezhenhaokan/article/details/129542239

版权

资源仅供展示，请自行补充

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
				list-style:none;
			}
			.nav ul{
				display:flex;
			}
			.nav li{
				width:100px;
				height:40px;
				background:blueviolet;
				color:#fff;
				text-align:center;
				line-height: 40px;
				margin:2px;
				cursor: pointer;
			}
			.nav li:hover{
				background:firebrick;
			}
			.con{
				width:400px;
				height:250px;
				background:lightyellow;
				border:5px solid pink;
				padding:20px;
				display:none;
				overflow: auto;
			}
			.con:first-child{
				display:block;
			}
			.con img{
				width: 100%;
			}
		</style>
		<script src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$(".nav li").click(function(){
					msg=$(this).attr("title")
					//alert(msg)//
					$(".con").css({"display":"none"})
					$(msg).css({"display":"block"})
				})
			})
		</script>
	</head>
	<body>
		<div class="nav">
			<ul>
				<li title="#div1">正能量语录</li>
				<li title="#div2">图片赏析1</li>
				<li title="#div3">图片赏析2</li>
				<li title="#div4">图片赏析3</li>
				
			</ul>
		</div>
		<div class="content">
			<div class="con" id="div1">
				<h2>某奥利给</h2>
				<p>我们遇到什么困难，也不要怕，微笑着面对它，面对恐惧最好的办法就是直面恐惧，加油，奥利给！</p>
				<img src="img/a1.jpg" alt="">
			</div>
			<div class="con" id="div2">
				<h2>舰娘—猫</h2>
				<img src="img/a2.jpg" alt="">
			</div>
			<div class="con" id="div3">
				<h2>舰娘—响</h2>
				<img src="img/a3.jpg" alt="">
			<div class="con" id="div4">
				<h2>舰娘—响</h2>
				<img src="img/a3.jpg" alt="">
			</div>
		</div>
	</body>
</html>

效果如下：