一个简单的tab切换

最新推荐文章于 2023-08-08 09:41:16 发布
最新推荐文章于 2023-08-08 09:41:16 发布
阅读量555 收藏
点赞数
分类专栏： Web JavaScript 文章标签： class function xhtml html div
Web 同时被 2 个专栏收录
109 篇文章 1 订阅
订阅专栏
JavaScript
101 篇文章 1 订阅
订阅专栏 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html;"/>
		<title>exercise for tab</title>
		<style type="text/css">
			*{margin:0;padding:0}
			.menu{width:500px;margin:20px;auto;}
			.menu a{display:inline-block;width:100px;height:35px;line-height:35px;text-align:center;color:#000;background:#aaa;}
			.menu a.curr{background:green;color:#fff;font-weight:bold;}
			.text{width:490px;height:180px;padding:5px;border:1px solid #aaa;}
			.hide{display:none;}
		</style>
		<script src="jquery-1.7.1.js"></script>
		<script type="text/javascript">
			$(function(){
				$(".menu a").click(function(){
					$(this).addClass("curr").siblings().removeClass("curr");
					$(".text div").eq($(".menu a").index(this)).show().siblings().hide();
				});
			});
		</script>
	</head>
	<body>
		<div class="menu">
			<a href="#" class="curr">Tab1</a>
			<a href="#">Tab2</a>
			<a href="#">Tab3</a>
			<a href="#">Tab4</a>
			<div class="text">
				<div>这是tab1</div>
				<div>这是tab2</div>
				<div>这是tab3</div>
				<div>这是tab4</div>
			</div>
		</div>
		
	</body>
<html>


cui_angel
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
非常简单的tab切换
10-14
非常简单的tab切换，小白也能看得懂,非常精简的!
简单的JS菜单TAB切换
01-28
简单的横向JS菜单TAB切换，无需调用JQUERY，支持所有浏览器。
最简单的Tab切换
baidu_41601299的博客
04-16 1万+
HTML <div class="main"> <div class="btn"> <!-- Tab标题 --> <span class="active spanList">课程介绍</span> <span class="spanList">用户故事</spa...
最简单的tab切换
anjignren的博客
08-18 202
*{ margin:0; padding:0; } .tab{ width: 400px; height: auto; display: block; /* background: #f1f2f2; */ } .tab ul{ width:400px; height:60px; display: flex; } .tab ul li{ ...
超级简单的tab切换
曲小强
03-20 246
&lt;!DOCTYPE html&gt; &lt;head&gt; &lt;meta charset="UTF-8"/&gt; &lt;title&gt;tab切换&lt;/title&gt; &lt;style type="text/css"&gt; ul,li,div{padding:0;margin:0}ul li{float
js实现简单的tab切换
he626shidizai的博客
03-26 503
一些感慨 本人属于小白级别，晚上的代码感觉都比较复杂（对于初学者来说）。 花了很大劲才出现效果，主要是html5不支持一些特性，而网上的教程有的又很老。 还有刚开始写js的时候不知道错误出在哪里一顿瞎找，吐槽js没有编译器。后来才发现浏览器的检查功能在console中会报错，这样就可以开心地找bug了。 要点 点卡切换我理解的就是要将切换的tab封装维div，然后修改display属性来确定显示哪...
使用JavaScript写一个简单的tab栏切换
lj940628的博客
12-19 385
tab栏切换demo样式如下： HTML代码如下 &lt;div class="box"&gt; &lt;div id="hd" class="hd"&gt; &lt;span class="current"&gt;新闻&lt;/span&gt; &lt;span&gt;体育&lt;/span&gt;
实现tab切换的功能
lengyuefengqing的博客
07-03 674
实现如下图Tab切换的功能 html代码： html> head> meta charset="utf-8"> title>DEMOtitle> head> body> div class="wrapper"> ul class="tabs"> li class="selected">Tab1li>
三种方法实现tab栏切换（CSS方法、JS方法、Vue方法）
最新发布
lbcbjtlhmjq的博客
08-08 6412
给下图的静态页面添加tab栏切换效果。
简单的tab选项卡切换
weixin_44543219的博客
01-31 8544
Tab选项卡切换 我们在网页上经常能看到的一个现象点击某一文字就会跳转出宁一个页面、而在同一个页面中点击头部内容，主体内容也会随之改变。前者是a 标签所实现的效果，而后者则是tab选项卡的切换。接下来我们一起来看看tab选项卡怎么个切换方法： 这是tab选项卡切换的源代码，由于内容较多，所以只截取了大...
实现简单的tab切换--滚动切换，点击切换
qq_40055200的博客
11-21 4043
tab切换时项目中是项目中经常用到的，把这个功能记录下来，共享 <!-- 思路： 1，右侧3个tab导航名称。注意：2种样式，未选中的样式，选中的那个改变样式 2. 左侧对应tab的内容。 注意：数据格式，循环出来的 [ title: '导航', subtitle: '线性图标', icons: [ { url: '../../a.svg', name: '张' },
简单实现Tab菜单的切换功能
weixin_46267824的博客
02-14 2256
做毕设时有点击菜单/导航栏项目然后切换页面内容的需求，记录一下这个小功能 主要思路 页面准备三个盒子：导航栏/菜单、内容盒子、展示盒子 建立导航标签/按钮到内容的映射字典，获取点击元素的class属性，在字典中查找对应的内容class属性，然后在展示盒子中显示该内容即可 html代码 <body> <!-- 导航菜单 --> <div class="nav"> <ul> <li cl
jQuery实现简单的tab切换
热门推荐
u012637258的博客
10-08 1万+
html:          tab1      tab2      tab3      tab4              内容一      内容二      内容三      内容四     css: *{box-sizing:border-box;} #nav{height:50px;} #nav a{display:block;heigh
简单好用的tab切换页面
走着学磔的专栏
03-17 799
闲来无事，总结下一个经常用到的tab切换的功能。 先上图： 这个是利用的RadioGroup和radiobutton实现点击切换tab功能，废话不说了，上代码吧！<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
简单实用的TAB切换标签
WEB木易
11-07 1041
插件描述:简单实用的TAB切换标签,可重复调用 引入JQ库,JS: 样式已经写在html上了,根据需求自行修改。
简单的Tab切换 (原生JS写)
wxfeiang的博客
07-04 6830
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;    &
最简单tab切换
weixin_38125809的博客
05-09 1392
以前都是用jquery，只要布局好，用一个siblings()方法就出来了现在学原生js&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;实践题 - 选项卡&lt;/title&gt; &lt;
手写一个底部tab切换按钮
04-24
好的，这个问题比较简单。底部tab切换按钮通常是用一个容器包裹多个按钮来实现的。以下是一个简单的示例代码： ```html <div class="tab-container"> <button class="tab-button active">首页</button> <button class="tab-button">新闻</button> <button class="tab-button">娱乐</button> <button class="tab-button">体育</button> </div> ``` 其中，`active`类表示当前选中的按钮。您可以使用CSS来控制按钮的样式： ```css .tab-container { display: flex; justify-content: space-around; align-items: center; height: 50px; background-color: #f0f0f0; } .tab-button { background-color: transparent; border: none; font-size: 16px; padding: 10px 20px; outline: none; cursor: pointer; } .tab-button.active { background-color: #fff; border-bottom: 2px solid #f00; color: #000; } ``` 在JS中，您可以为每个按钮添加一个点击事件，以便在单击按钮时切换选中状态。以下是一个示例代码： ```js const buttons = document.querySelectorAll('.tab-button') buttons.forEach(button => { button.addEventListener('click', () => { buttons.forEach(b => b.classList.remove('active')) button.classList.add('active') }) }) ``` 这段代码将为所有`tab-button`按钮添加点击事件。单击按钮时，它将从所有按钮中删除`active`类，并将其添加到当前单击的按钮上以表示选中状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值