页面选项卡切换

最新推荐文章于 2023-10-21 20:03:09 发布
最新推荐文章于 2023-10-21 20:03:09 发布
阅读量626 收藏 2
点赞数
分类专栏： 功能（方法）实现案例 文章标签： 选项卡切换 JavaScrip 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42166007/article/details/96626577
版权

HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>daohanqiehuan.html</title>
<link rel="stylesheet" type="text/css" href="css/dhqh.css">
<script type="text/javascript" src="js/jQuery.min.js" ></script>
</head>
<body >
	
    <div class="mall">
    	<!--导航栏-->
	    <div class="mall_tab">
		    <!--<ul>
				<li id ="prescribed_drug_tab" onmousemove="qie('cf')" onmouseout="qie1(this)">处方</li>
				<li id ="no_prescribed_drug_tab" onmousemove="qie('fcf')" onmouseout="qie1(this)">非处方</li>
				<li id ="medical_instruments_tab" onmousemove="qie('ylqx')" onmouseout="qie1(this)">医疗器械</li>
				<li id ="Chinese_drugs_tab" onmousemove="qie('zyyp')" onmouseout="qie1(this)">中药饮片</li>
				<li id ="protective_foods_tab" onmousemove="qie('bjsp')" onmouseout="qie1(this)">保健食品</li>
				<li id ="sanitation_appliance_tab" onmousemove="qie('xwyp')" onmouseout="qie1(this)">消卫用品</li>
		    </ul>-->
		    <ul>
				<li id ="prescribed_drug_tab" class="on">1</li>
				<li id ="no_prescribed_drug_tab" >2</li>
				<li id ="medical_instruments_tab" >3</li>
				<li id ="Chinese_drugs_tab" >4</li>
				<li id ="protective_foods_tab" >5</li>
				<li id ="sanitation_appliance_tab" >6</li>
		    </ul>
	    </div>
	    
	    <!--内容-->
	    <div class="mall_nr">
			<!--处方药-->
			<div id="prescribed_drug" class="onshow" style="display: block;">
				<div class="mall_nr_box">
					<div class="mall_nr_tit">
					    <span style="font-size: 20px;vertical-align: middle;color: red;margin-left: 10px;margin-right: 5px;">&bull;</span>
					    <span style="vertical-align: middle;">1</span>
					</div>
					<div class="mall_nr_content">
						<ul>
							<li>
								<div class="mall_nr_content_img">
									<img src="img/pic_2.jpg" />
								</div>
								<div class="mall_nr_content_span">
									<span>1</span>
								</div>
							</li> 
						</ul>
					</div>
				</div>
			</div>
			  
			<!--非处方药-->
			<div id="no_prescribed_drug" class="onshow">
				<div class="mall_nr_box">
					<div class="mall_nr_tit">
					    <span style="font-size: 20px;vertical-align: middle;color: red;margin-left: 10px;margin-right: 5px;">&bull;</span>
					    <span style="vertical-align: middle;">2</span>
					</div>
					<div class="mall_nr_content">
						<ul>
							<li>
								<div class="mall_nr_content_img">
									<img src="img/pic_2.jpg" />
								</div>
								<div class="mall_nr_content_span">
									<span>2</span>
								</div>
							</li> 
						</ul>
					</div>
				</div>
			</div>
			  
			<!--医疗器械-->
			<div id="medical_instruments" class="onshow">
				<div class="mall_nr_box">
					<div class="mall_nr_tit">
					    <span style="font-size: 20px;vertical-align: middle;color: red;margin-left: 10px;margin-right: 5px;">&bull;</span>
					    <span style="vertical-align: middle;">3</span>
					</div>
					<div class="mall_nr_content">
						<ul>
							<li>
								<div class="mall_nr_content_img">
									<img src="img/pic_2.jpg" />
								</div>
								<div class="mall_nr_content_span">
									<span>3</span>
								</div>
							</li> 
						</ul>
					</div>
				</div>
			</div>
			  
			<!--中药饮片-->
			<div id="Chinese_drugs" class="onshow">
				<div class="mall_nr_box">
					<div class="mall_nr_tit">
					    <span style="font-size: 20px;vertical-align: middle;color: red;margin-left: 10px;margin-right: 5px;">&bull;</span>
					    <span style="vertical-align: middle;">4</span>
					</div>
					<div class="mall_nr_content">
						<ul>
							<li>
								<div class="mall_nr_content_img">
									<img src="img/pic_2.jpg" />
								</div>
								<div class="mall_nr_content_span">
									<span>4</span>
								</div>
							</li> 
						</ul>
					</div>
				</div>
			</div>
			  
			<!--保健食品-->
			<div id="protective_foods" class="onshow">
				<div class="mall_nr_box">
					<div class="mall_nr_tit">
					    <span style="font-size: 20px;vertical-align: middle;color: red;margin-left: 10px;margin-right: 5px;">&bull;</span>
					    <span style="vertical-align: middle;">5</span>
					</div>
					<div class="mall_nr_content">
						<ul>
							<li>
								<div class="mall_nr_content_img">
									<img src="img/pic_2.jpg" />
								</div>
								<div class="mall_nr_content_span">
									<span>5</span>
								</div>
							</li>  
						</ul>
					</div>
				</div>
			</div>
			  
			<!--消卫用品-->
			<div id="sanitation_appliance" class="onshow">
				<div class="mall_nr_box">
					<div class="mall_nr_tit">
					    <span style="font-size: 20px;vertical-align: middle;color: red;margin-left: 10px;margin-right: 5px;">&bull;</span>
					    <span style="vertical-align: middle;">6</span>
					</div>
					<div class="mall_nr_content">
						<ul>
							<li>
								<div class="mall_nr_content_img">
									<img src="img/pic_2.jpg" />
								</div>
								<div class="mall_nr_content_span">
									<span>6</span>
								</div>
							</li> 
						</ul>
					</div>
				</div>
			</div>
		</div>
	  
    </div>
 
  </body>
  <script type="text/javascript" src="js/dhqh.js"></script>
</html>

Css：

html{
	font-size: 55px;
}
body{
	font-size:12px;
	margin: 0;
	padding: 0;
}
*{
	padding: 0;
	margin: 0;
}
.mall{
	overflow: hidden;
}

.mall_tab{
	width:20%;
	height: 1500px;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #eeeeee;
}
.mall_tab ul{
	float: left;
	list-style-type :none;
}
.mall_tab li{
	width:100%;
	height: 28px;
	float: left;
	text-align: center;
	padding-top: 10px;
	margin-bottom: 5px;
	border-bottom: 2px solid #FFFFFF;
}
.mall_tab li:first-child{
	margin-top: 0;
}

.mall_nr{
	width: 80%;
	float: right;
	color: 	#666666;
	background-color: #FFFFFF;
} 
.mall_nr_tit{
	height: 30px;
	background-color: #f8f8f8;
}
.mall_nr_content{
	overflow: hidden;
	padding-bottom: 10px;
}
.mall_nr_content li{
	width: 31%;
	float: left;
	padding-top: 10px;
	margin-right: 1.75%;
	list-style: none;
}
.mall_nr_content li:nth-child(3n-2){
	margin-left: 1.75%;
}
.mall_nr_content_img{
	width: 100%;
	height: 60px;
}
.mall_nr_content_img img{
	width: 60%;
	height: 100%;
	display: block;
	margin: 0 auto;
}
.mall_nr_content_span{
	margin-top: 5px;
	padding: 0 18px;
	height: 16px;
	overflow: hidden;
	text-align: center;
}
.mall_nr .onshow{
	display: none;
}
.on{
	color: chartreuse;
	background-color: #E0EEEE;
}
/*.active{
	color: red;
}*/

/*.no_prescribed_drug_box,.medical_instruments_box,.Chinese_drugs_box,.protective_foods_box,.sanitation_appliance_box{
	display:none;
}*/

Js：
 

$(".mall_tab>ul>li").click(function(){
	$(this).addClass('on').siblings().removeClass('on');
	//$('.nr div').eq($(this).index()).css("display","block").siblings().css("display","none");
	$('.mall_nr .onshow').eq($(this).index()).show().siblings().hide();
	//$('.nr div').eq($(this).index()).addClass('onshow').siblings().removeClass('onshow');
	//$(this).index();
});

 

uhhuh-495
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 滑动页面切换tab
02-18
html5 滑动页面切换tab,点击tab也可以切换，非常实用。
"标签栏"组件:<main-tab> —— 快应用组件库H-UI
H-UI官方博客
04-17 534
<import name="main-tab" src="../Common/ui/h-ui/navigation/c_main_tab"></import> <template> <div class="container-full"> <main-tab data="{{data}}"> ...
前端html+css+js开发：简单选项卡切换-自动（附源码）
qq_57210034的博客
05-21 1687
效果图： css代码： * { margin: 0; padding: 0; font-size: 12px; font-family: "微软雅黑"; color: #3c3c3c; text-decoration: none; list-style-type:none; } #tab_list { width: 275px; height: 190px; margin: 30px auto;.
前端：html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）
weixin_46001736的博客
08-25 4911
前端：html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）
前端基础：同页面不同区块跳转的三种方式
huangfengnt的博客
10-19 2551
前端基础：同页面不同区块跳转的三种方式
jQuery简单实现tab选项卡切换效果
10-22
主要介绍使用jQuery封装了一个tab选项卡切换的插件，需要的朋友可以参考下。
js+css实现切换选项卡代码
10-16
js+css实现切换选项卡代码，非常简单，直接修改页面中的代码，即可达到想要的效果。
完美实现js选项卡切换效果(二)
10-20
主要为大家详细介绍如何完美实现js选项卡切换效果，通过设置定时器实现延时0.5s切换选项卡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
轻松实现js选项卡切换效果
12-28
一.HTML页面布局 <!-- HTML页面布局 --> 房产 家居 二手房 <div> 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼盘 53万购东5环50平 京楼盘直降5000 ...
很棒的Bootstrap选项卡切换效果
11-22
今天学习了Bootstrap的选项卡，在这里分享一下，具体解释代码中都有，不再重复了。 先看一下效果图吧，显目一些！ 实现代码： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=...
html如何实现选项卡切换思路,Tab选项卡切换完整思路及实现，值得珍藏
weixin_39590453的博客
06-28 3971
原标题：Tab选项卡切换完整思路及实现，值得珍藏这篇文章是从微信上转载过来的，原文作者是“Java实例解析”，文章内容很棒，只是这个作者可能是一时看不到效果，所以没更新几篇就放弃了，让人惋惜。今天要推荐给大家的这个js动画效果，基本上每个网站都会出现，就是tab选项卡的切换效果。这个效果如果使用jQuery这些框架的话，写起来就很方便，但是，为了提高我们的写原生js的能力，所以我一般都会说用原生j...
HTML 实现 点击按钮切换 整张界面 && 点击按钮切换局部界面
m0_63669388的博客
10-21 5084
本文详细介绍了在前端如何用button按钮实现页面切换的几种方法，包括a标签 重定向等等方法，并附有代码易于理解。
html+js+css实现同一页面中内容的不同切换
weixin_50450473的博客
07-28 9599
html： <div class="columnNav"> <ul class="tabs"> <li class="active"><a href="#tab1">功能区域</a></li> <li><a href="#tab2">管护区划</a></li> <li><a href="#tab3">防火等级<...
前端实现选项卡切换功能
Mr.小灰狼_随笔
07-06 1863
目录 选项卡_0.0 HTML _ 结构部分 : CSS _ 样式部分 : JS 代码实现 : 底码 : 优化 : 底码优化精简版: forEach实现选项卡 :
php选项卡切换,jQuery选项卡切换特效实现步骤
weixin_36231030的博客
03-10 244
这次给大家带来jQuery选项卡切换特效实现步骤，jQuery选项卡切换的注意事项有哪些，下面就是实战案例，一起来看一下。1、tab切换 onjQuery tab切换*{margin:0;padding:0;}.wrap{margin-left: 50px;margin-top: 50px;}/*清浮动---clearfix*/.clearfix {*zoom: 1;}.clearfix:afte...
服务器显示选择一个选项,在tableau服务器上的一个页面中显示多个选项卡(Displaying multiple tabs in one page on the tableau server)...
weixin_33158453的博客
08-13 370
An ideal flow from Datasource to Data Visualisation in Tableau is:+------------+ +-----------+ +----------+ +-----+| | | | | | | ||Data Sources+--...
Tableau基础操作——界面简介及功能介绍
hsf_smile的博客
11-05 6753
Tableau基础操作之界面简介和功能介绍
vue选项卡切换实验结论
最新发布
12-02
通过对vue选项卡切换实验的观察和分析，可以得出以下结论： 首先，使用vue实现选项卡切换是一种方便且高效的方法。Vue提供了非常强大的数据绑定和指令系统，可以很轻松地实现选项卡切换的功能。通过简单的操作，在vue组件中可以轻松地实现选项卡的切换功能，使得页面呈现更加灵活和多样化。 其次，vue选项卡切换可以提高用户体验。通过vue实现的选项卡切换操作，可以让用户在不同的选项卡之间进行快速切换，从而可以更加便捷地查看和操作相关内容。这种交互方式可以提高页面的易用性，让用户更加愉快地使用应用程序或网页。 另外，通过vue实现选项卡切换可以提高代码的复用性和可维护性。通过使用vue组件化的开发方式，可以将选项卡切换的功能封装成一个组件，这样可以使得代码更加清晰和模块化，方便复用和维护。 总之，通过实验我们可以得出结论，vue选项卡切换是一种高效、方便且用户体验较好的实现方式，可以在实际开发中广泛应用。同时，在实现选项卡切换功能时，也可以充分利用vue的特性，提高代码的复用性和可维护性，从而更好地优化页面交互和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值