仿京东选项卡效果

最新推荐文章于 2024-09-09 21:24:01 发布

原创

最新推荐文章于 2024-09-09 21:24:01 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用HTML、CSS和JavaScript来创建一个类似京东网站的选项卡效果，包括切换面板、动态显示隐藏内容等功能，助你提升前端交互体验。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选项卡</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				font-size: 14px;
			}
			ul li{
				list-style:none;	
			}
			#menu{
				width: 552px;
				line-height: 30px;
				overflow: hidden;
				background:#eee;
			}
			#menu li{
				float: left;
				width: 90px;
				border-left: 1px solid #eee;
				border-right: 1px solid #eee;
				border-top: 2px solid #eee;
				text-align: center;
				cursor: pointer;
			}
			#menu .active{
				border-left-color: #ccc;
				border-right-color: #ccc;
				border-top-color: blue;
				cursor: pointer;
				background:#fff;
			}
			#content{
				width: 552px;
			}
			#content>div {
				display: none;
				padding: 10px;
				overflow: hidden;
			}
			#content>div img{
				float: left;
				width:255px ;
				height: 96px;
				margin-right: 10px;
			}
			#content>div .title{
				padding: 2px 0;
				border-b