0
点赞
收藏
分享

微信扫一扫

jQuery实现的产品中心tab选项卡实例网页源码

宁静的猫 2022-04-15 阅读 50

大家好,今天给大家介绍一款,jQuery实现的产品中心tab选项卡实例网页源码(图1)。送给大家哦,获取方式在本文末尾。

图1

页面布局为左右结构,点击左边的选项卡可以切换右边的页面(图2)

图2

部分源码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery tab</title>
		<link rel="stylesheet" type="text/css" href="static/css/style.css">
		<script src="static/js/jquery-1.10.2.js"></script>
	</head>
	<body>
		<!--产品中心-->
		<div class="pro-center">
			<div class="container">
				<div class="title">产品中心</div>
				<div class="sub-title">
					<span>——</span>
					<span class="text">Products Center</span>
					<span>——</span>
				</div>
				<div class="pro-content">
					<div class="pro-left">
						<div class="left-title">
							<span>-</span>
							<span class="text">这是标题</span>
							<span>-</span>
						</div>
						<!--分类,on状态为当前高亮-->
						<div class="left-category">
							<ul>
								<li>这是分类</li>
								<li class="on">这是分类</li>
								<li>这是分类</li>
								<li>这是分类</li>
								<li>这是分类</li>
								<li>这是分类</li>
							</ul>
							<div class="left-contact">
								<p>全国服务咨询热线</p>
								<p class="tel">800-8686868</p>
							</div>
						</div>
					</div>
					<!--对应分类的内容,active状态为显示-->
					<div class="pro-right">
						<ul>
							<li>
								<a href="#">

图3

本模板编码:10128,需要的朋友,关注下面公众号后,搜索10128,即可获取。

举报

相关推荐

0 条评论