简单的Tab

最新推荐文章于 2023-08-17 08:58:13 发布
最新推荐文章于 2023-08-17 08:58:13 发布
阅读量61 收藏
点赞数
分类专栏： jQuery 文章标签： UI jQuery HTML ViewUI 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.ui-tabs {position: relative; float: left;}
.ui-tabs ul {margin: 0px; padding: 0px;}
.ui-tabs-nav { list-style: none; position: relative; display: inline-block;}
.ui-tabs-nav:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 2px 0 0; padding: 0; }
.ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em; cursor: pointer;}
.ui-tabs-panel { padding: 1em 1.4em; display: block; border: 1px solid #26b3f7; background: #000000 url(images/ui-bg_loop_25_000000_21x21.png) 50% 50% repeat; color: #ffffff; }
.ui-state-active { border: 1px solid #26b3f7; background: #0972a5 url(images/ui-bg_highlight-hard_20_0972a5_1x100.png) 50% 50% repeat-x; font-weight: normal; color: #ffffff; outline: none; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #ffffff; outline: none; text-decoration: none; }
.ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #444444; background: #222222 url(images/ui-bg_highlight-soft_35_222222_1x100.png) 50% 50% repeat-x; font-weight: normal; color: #eeeeee; outline: none; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #eeeeee; text-decoration: none; outline: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #0b93d5; background: #003147 url(images/ui-bg_highlight-soft_33_003147_1x100.png) 50% 50% repeat-x; font-weight: normal; color: #ffffff; outline: none; }
.ui-state-hover a, .ui-state-hover a:hover { color: #ffffff; text-decoration: none; outline: none; }
</style>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
jQuery(function() {
	var li = jQuery("#tabs ul li");
	li.hover(function(){
		if(!jQuery(this).hasClass("ui-tabs-selected")) {
			jQuery(this).addClass("ui-state-hover");
		}
	}, function() {
		if(jQuery(this).hasClass("ui-state-hover")) {
			jQuery(this).removeClass("ui-state-hover");
		}
	}).click(function() {
		if(!jQuery(this).hasClass("ui-tabs-selected")) {
			if(li.hasClass("ui-tabs-selected")) {
				li.removeClass("ui-tabs-selected ui-state-active");
				li.addClass("ui-state-default");
			}
			jQuery(this).removeClass("ui-state-default ui-state-hover");
			jQuery(this).addClass("ui-tabs-selected ui-state-active");

			var id = jQuery(this).children("a").attr("href");
			jQuery(".ui-tabs-panel").hide();
			jQuery(id).show();
			return false;
		}else {
			return false;
		}
	});
	jQuery("#fragment-3,#fragment-2").hide();
});
</script>
</head>
<body>
<div id="tabs" class="ui-tabs">
    <ul class="ui-tabs-nav">
        <li class="ui-corner-top ui-tabs-selected ui-state-active"><a href="#fragment-1"><span>One</span></a></li>
        <li class="ui-corner-top ui-state-default"><a href="#fragment-2"><span>Two</span></a></li>
        <li class="ui-corner-top ui-state-default"><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1" class="ui-tabs-panel">
        <p>First tab is active by default:</p>
        <pre><code>$('#example').tabs();</code></pre>
    </div>
    <div id="fragment-2" class="ui-tabs-panel">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div id="fragment-3" class="ui-tabs-panel">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
</div>
</body>
</html>
dyunlong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS的简单tab切换实现
DayDreamWMM的博客
06-30 2万+
实现思路是点击上方的按钮，下方的内容随之发生改变，上方和下方用的是两个div块，是兄弟节点，所以需要让tab按钮和下方内容一一对应，例子是基予两个模块若下标相同是一个内容实现的，首先是HTML框架：<div id="box">//包含tab按钮和内容的整体大框架 <div id="head_list"">//tab按钮及内容 <input ty
Vue实现简易tab切换效果
ZZHK666的博客
07-21 179
ul li { margin: 0; padding: 0; list-style: none; } #app { width: 600px; height: 400px; margin: 0 auto; border: 1px solid #ccc; } .t...
html5 tab菜单切换页面,jquery实现简单Tab切换菜单效果
weixin_39607710的博客
06-03 627
本文实例为大家分享了jquery Tab切换菜单的实现代码，供大家参考，具体内容如下实现tab切换的主要html代码：导航菜单TAB标签jquery css多级下拉菜单多级菜单，理论上支持无限多的层级，文件结构非常简单的，具体的请看下面的内容各种tab标签选项卡tab标签页面,ajax载入 tab标签，jquery ajax载入数据库的内容实现tab切换的jquery代码：$(document)....
JQ简易tab栏
zyfxcj的博客
08-17 40
【代码】JQ简易tab栏。
一个html能拆分多个tab,一个页面可多处重复使用的简单tab标签jQuery代码
weixin_31499719的博客
06-14 434
之前一直用“SuperSlide”这个js框架写tab标签或者其他一些效果，但是后来慢慢发现，写zblog主题用不上这么大的js框架，特别是SuperSlide对手机端很不友好，所以现在没怎么用了。现在页面的一些简单的js效果都慢慢开始手写了，本文为大家介绍的就是一个“在一个页面可多处重复使用的简单tab标签jQuery代码”。ps：此代码依赖JQ库，请在使用前先引入1.8以上版本的JQ库。js代...
uni-app 简单tab切换
u014748857的博客
07-08 5070
页面代码： <view class="numb_nav"> <view :class="['nav_te',Inv==0?'nav_tes':'']" @click="Inv=0">全部</view>| <view :class="['nav_te',Inv==1?'nav_tes':'']" @click="Inv=1">转入</view>| <view :class="['
vue简单实现tab切换
杨爽
08-03 1666
tab切换效果如下： 注：（图片用的public静态资源管理） 上方的标题和下方的图片用的是两个块，是兄弟节点，所以需要点击tab标题和下方的图片一一对应 利用vue提供的v-for指令遍历得到索引和值 html结构（两块结构）： <template> <div id="app"> <!-- 导航 --> <ul class="tab-tilte"> <li v-for="(item,inde
React实现简易Tab切换案例
weixin_45389051的博客
04-25 1920
说实话，写这个的时候，真是觉得Vue太香了，香的不得了,好吧，不吹vue了???? 第一步还是先创建类组件 class Tab extends React.Component{} 第二步在Tab中开始定义状态 class Tab extends React.Component{ constructor(){ super()//从原型上继承对应的方法和属性,this必须写在super下面...
Vue实现简单的tab切换
weixin_52976120的博客
12-27 250
【代码】Vue实现简单的tab切换。
使用vue实现简易tab切换的功能
brilliantSt的博客
05-07 1120
tab切换，就是点击上面的标题，下面的内容随之发生改变。有两种基本实现思路。 1.通过 v-if 或者 v-show 来控制显示和隐藏 <template> <div class="tab"> <header> <span @click="index=0">历史</span> &nbsp;&nbsp;&nbsp; <span @click="index=1">文化&
jquery实现简单Tab切换菜单效果
10-22
标题中的“jQuery实现简单Tab切换菜单效果”是指在网页设计中使用jQuery库来创建一个交互式的Tab菜单系统，使得用户可以通过点击不同的Tab选项来切换显示不同的内容区块。这个功能常见于许多网站，用于组织和展示多...
简易tab效果
05-27
以上就是创建简易Tab效果的基本步骤。在实际项目中，可能会引入前端框架如React、Vue或Angular来简化开发，并利用其内置的生命周期方法和状态管理来处理Tab的切换。同时，也可以考虑使用CSS预处理器（如Sass或Less）...
JS实现简单tab选项卡切换
10-16
标题中的"JS实现简单tab选项卡切换"是指在网页设计中使用JavaScript来创建一个简易的选项卡切换功能。选项卡是一种常见的用户界面元素，用于组织和展示内容，让用户能够通过不同的选项卡浏览多个相关的但互斥的信息...
JS实现的简单tab切换功能完整示例
10-16
在本文中，我们将深入探讨如何使用JavaScript实现一个简单的tab切换功能。这个功能允许用户通过点击不同的选项卡来显示或隐藏相应的内容区域，从而提供一种交互式的用户体验。下面，我们将逐步解析给定的代码示例，...
尚品汇项目思维导图 根据思维导图进行复习
07-13
尚品汇项目思维导图 根据思维导图进行复习
全网最热Python3入门+进阶 更快上手实际开发
07-13
网最热Python3入门+进阶 更快上手实际开发 第1章 Python入门导学.mp4 239.6MB 第9章 高级部分：面向对象 第8章 Python函数 第7章 包、模块、函数与变量作用域 第6章 分支、循环、条件与枚举 第5章 变量与运算符 第4章 Python中表示“组”的概念与定义 第3章 理解什么是写代码与Python的基本类型 第2章 Python环境安装 第1章 Python入门导学 第14章 Pythonic与Python杂记 第13章 实战：原生爬虫 第12章 函数式编程： 匿名函数、高阶函数、装饰器
Go：Go语言项目实战教程
07-14
Go：Go语言项目实战教程
反恐精英游戏CS1.6安装好后界面看不到菜单，改中文，并调整分辨率
最新发布
07-14
反恐精英游戏CS1.6安装后，很多人打开后界面是看不到菜单的，一般是因为分辨率不对，将这个.reg导入即可完成设置。 下载完成后，双击运行该文件，按照提示进行操作。在导入过程中，可能会出现警告信息，点击“是”或“确定”继续。 导入成功后，重新启动CS1.6游戏，你会发现界面已经调整为正确的分辨率，菜单也能够正常显示了。这样，你就可以愉快地享受游戏了。
垫板凸模加工及三数控机床视化仿真的研究（毕业论文）
07-14
【作品名称】：垫板凸模加工及三数控机床视化仿真的研究（毕业论文） 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】：在计算机技术迅猛发展的同时，数控技术也迎来了革命性的变化，计算机仿真、模拟技术已成为实际加工的前提，它省去了大量的工作量，提高了生产效率，最重要的是模拟、仿真技术将实际加工中的材料损失降到了最低，大大节约了加工成本。作者在查阅和搜索了大量与本毕业设计相关资料的基础上，对数控技术，特别是其中的模拟仿真技术进行深刻的认识和研究，并在指导老师的耐心指导下，首先熟悉了CATIA V5 R20 软件，设计出此次两个零件的垫板凸模任务是根据模型设计出他它们的加工方法，利用轮廓铣对复杂曲面进行粗加工和精加工，最后，结合CATIA中设计好了的模型实例展现了VERICUT环境下数控加工仿真的全过程
html tab 选项卡切换代码,JS实现简单tab选项卡切换
05-13
HTML代码： ``` <div class="tab"> <button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1</button> <button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button> <button class="tablinks" onclick="openTab(event, 'tab3')">Tab 3</button> </div> <div id="tab1" class="tabcontent"> <h3>Tab 1 Content</h3> <p>This is the content of Tab 1.</p> </div> <div id="tab2" class="tabcontent"> <h3>Tab 2 Content</h3> <p>This is the content of Tab 2.</p> </div> <div id="tab3" class="tabcontent"> <h3>Tab 3 Content</h3> <p>This is the content of Tab 3.</p> </div> ``` CSS代码： ``` /* 隐藏所有选项卡内容 */ .tabcontent { display: none; } /* 样式化选项卡按钮 */ .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; } .tab button:hover { background-color: #ddd; } .tab button.active { background-color: #ccc; } /* 样式化选项卡内容 */ .tabcontent { padding: 6px 12px; border: 1px solid #ccc; border-top: none; } ``` JavaScript代码： ``` function openTab(evt, tabName) { // 隐藏所有选项卡内容 var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // 取消所有选项卡按钮的激活状态 tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } // 显示当前选项卡内容并激活按钮 document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " active"; } ``` 以上代码实现了一个简单的选项卡切换效果。点击每个按钮时，会显示对应的选项卡内容，并且激活该按钮。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值