使用CSS和JavaScript实现微博选项卡效果-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_69422950/article/details/124831694

本文介绍如何利用HTML、CSS以及JavaScript创建动态的微博选项卡，通过实例展示如何布局、样式化以及实现选项卡间的切换交互，提升网页用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<!DOCTYPE html>
	<html lang="zh-CN">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	* {
	padding: 0;
	margin: 0;
	list-style: none;
	}

	.wrap {
	width: 320px;
	height: 568px;
	background-color: pink;
	box-shadow: 0 0 3px #111;
	margin: 0 auto;
	position: relative;
	}

	nav {
	text-align: center;
	height: 44px;
	line-height: 44px;
	background-color: aliceblue;
	border-bottom: 1px solid #333;
	}

	.window {
	width: 320px;
	height: 60px;
	position: relative;
	}

	.slider {
	width: 320px;
	height: 60px;
	background-color: antiquewhite;
	border-bottom: 1px solid #333;
	overflow-x: scroll;
	overflow-y: hidden;

	}

	.move {
	width: 720px;
	padding-right: 40px;
	}

	.move p {
	width: 80px;
	text-align: center;
	float: left;
	height: 60px;
	line-height: 60px;

	}

	.more {
	position: absolute;
	right: 0;
	top: 0;
	width: 40px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	background-color: cyan;
	}

	.alert {
	width: 320px;
	height: 568px;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: #ebebeb;
	overflow: scroll;
	}

	.alert p {
	height: 40px;
	box-sizing: border-box;
	padding: 10px;
	}

	.alert p span:nth-of-type(1) {
	float: left;
	line-height: 20px;
	}

	.alert p span:nth-of-type(2) {
	float: right;
	color: dodgerblue;
	line-height: 20px;
	}

	.alert div {
	box-sizing: border-box;
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	}

	.alert div span {
	width: 66px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	box-sizing: border-box;
	margin: 5px 0;
	font-size: 14px;

	}

	.alert .mine span {
	background-color: lightgray;
	position: relative;
	}

	.alert .mine span strong {
	position: absolute;
	top: -8px;
	left: -8px;
	width: 16px;
	height: 16px;
	background-color: #666;
	color: aliceblue;
	line-height: 16px;
	font-size: 12px;
	text-align: center;
	border-radius: 50%;
	}

	.alert .tj span {
	border: 1px dashed black;
	}
	</style>
	</head>

	<body>
	<div class="wrap">
	<nav>微博</nav>
	<div class="window">
	<div class="more">+</div>
	<div class="slider">
	<div class="move">
	<p>热门</p>
	<!-- <p>社会</p>
	<p>明星</p>
	<p>国际</p>
	<p>榜单</p>
	<p>放映厅</p>
	<p>美女</p>
	<p>靓仔</p>
	<p>体育</p> -->
	</div>

	</div>
	</div>
	<div class="alert">
	<p>
	<span>我的频道</span>
	<span>完成</span>

	</p>
	<div class="mine">
	<span>热门</span>
	<!-- <span>
	<em> 热门 </em>
	<strong>X</strong>
	</span> -->

	</div>
	<p>
	<span>推荐频道</span>
	</p>
	<div class="tj">
	<!-- <span>热门</span> -->

	</div>

	</div>
	</div>
	</body>
	<script>
	var pds = ["同城", "抗疫", "财经", "读书", "摄影", "电影", "体育", "综艺", "时尚", "星座", "故事", "房产", "家居", "萌宠", "科普", "动漫", "艺术", "美妆", "音乐", "法律", "设计", "历史", "瘦身", "游戏", "校园", "抽奖", "育儿", "婚恋", "吃鸡", "王者", "教育", "养生"];
	var dTj = document.querySelector('.tj');
	var dMine = document.querySelector('.mine');

	// 将数据显示到推荐模块中
	function showDataInTj() {
	for (var i = 0; i < pds.length; i++) {
	createSpan(pds[i]);

	}
	}
	showDataInTj();


	function createSpan(info) {
	var span = document.createElement('span');
	span.innerHTML = '+' + info;
	dTj.appendChild(span);
	span.onclick = function(){
	var ss = document.createElement('span');
	ss.innerHTML = `
	<em> ${this.innerHTML.substr(1)}</em>
	<strong>X</strong>
	`;
	dMine.appendChild(ss);

	var strong = ss.querySelector('strong');

	strong.onclick = del;
	dTj.removeChild(this);
	}
	}

	function del() {
	var str = this.previousElementSibling.innerHTML;

	createSpan(str);
	dMine.removeChild(this.parentNode);


	}


	</script>

	</html>