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

最新推荐文章于 2022-12-10 19:53:44 发布

mazai5080

最新推荐文章于 2022-12-10 19:53:44 发布

阅读量537

点赞数

分类专栏：前端源码文章标签： javascript 经验分享 jquery

本文链接：https://blog.csdn.net/mazai5080/article/details/124204436

版权

前端源码专栏收录该内容

100 篇文章 25 订阅

订阅专栏

大家好，今天给大家介绍一款，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，即可获取。

mazai5080

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现的产品中心tab选项卡实例网页源码

大家好，今天给大家介绍一款，jQuery实现的产品中心tab选项卡实例网页源码（图1）。送给大家哦，获取方式在本文末尾。图1页面布局为左右结构，点击左边的选项卡可以切换右边的页面（图2）图2部分源码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>jquery tab</title> <link rel="sty
复制链接

扫一扫