tab标签切换

最新推荐文章于 2024-08-09 06:13:01 发布
最新推荐文章于 2024-08-09 06:13:01 发布
阅读量507 收藏
点赞数
分类专栏： HTML 文章标签： class div border function xhtml javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyg__wangjian/article/details/7040467
版权

 <!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; charset=utf-8" />
<title>tab标签切换</title>
<style>
*{font-size:10.5pt;margin:0px;padding:0px;}   
.codeDemoUL {
 list-style: none;
 clear:right;
 overflow:hidden;
 cursor:pointer;
 z-index:3;
 position:relative;
 margin-bottom:-1px;   
  }   
.codeDemoUL li {
 float:left;
 padding:5px 10px;
 display:inline;
 border-bottom:none;
 margin: 0 5px 0 0;
 overflow: visible;
 line-height:1.5em;
}
.codeDemomouseOnMenu {
 border:1px solid #bdc5c8;
 border-bottom:1px solid #fff;
 background-color:#fff;
 font-weight:bold;
}
.codeDemomouseOutMenu{
 border:1px solid #bdc5c8;
 background-color:#d7e0e3;
}
.codeDemoDiv {
 clear:both;
 border:1px solid #bdc5c8;  
 overflow:hidden;
 margin-bottom:10px; 
 width:800px;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
 <!--
 var $ = function(o) {return document.getElementById(o);}
 function showDiv(parm){  
 $('divDemo').style.display='none';   
 $('divCode').style.display='none';   
 $(parm).style.display = '';   
 for(var i in $('ulMenu').getElementsByTagName('LI')){       
 $('ulMenu').getElementsByTagName('LI')[i].className = 'codeDemomouseOutMenu';   
 }}
 //-->
</SCRIPT>
</head>
<body>
<div style="margin-left:5px;">
 <ul class="codeDemoUL" id="ulMenu">           
   <li class="codeDemomouseOnMenu" οnclick="showDiv('divDemo');this.className='codeDemomouseOnMenu'">DIV111</li>
   <li class="codeDemomouseOutMenu" οnclick="showDiv('divCode');this.className='codeDemomouseOnMenu'">DIV222</li>
 </ul>      
 <div  class="codeDemoDiv" id="divDemo">  
  <br />       
  &nbsp;&nbsp;&nbsp;DIV111

 </div>   
 <div class="codeDemoDiv" id="divCode" style="display:none">       
  <br />&nbsp;&nbsp;&nbsp;DIV222    
 </div>
</div>
</body>
</html>

lyg__wangjian
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【加餐 2】Tab 标签页管理
超逸の学习技术博客
04-14 1179
在本章中，我们首先构想了一个标签页的功能，然后我们梳理了实现思路，选择使用 Pinia 管理标签页状态，并在组件中使用 el-tabs 组件生成页面效果，最后实现右键呼出下拉菜单的基本功能。在此基础上，我们可以继续拓展标签页的功能，比如标签页的刷新、固定时展示固定 icon、点击 icon 固定等其它功能。
用多种方法实现tab标签切换
zsl_955200的博客
12-08 5382
在开始之前先谈谈局外话，最近正在找工作，发现好多公司都要求在某某上面有文章发表，一次文章都没发过的我感觉好尴尬，忙里偷闲发表点文章，毕竟第一次发，望前辈们嘴下留情！ 昨天去面试，面试官让我手写一段代码实现tab标签的切换，因为家里有事，辞职了一个月，一个月都没写代码了，手生了不少，我竟然没写出来，今天我研究了一下，用了三种方法实现这种效果，分别是纯CSS，原生JS，JQuery 1，纯CSS的写法
Tab标签
m0_74348480的博客
01-17 212
Tab标签
HTML——tab标签
热门推荐
最好的时光里
12-16 5万+
前言   小编最近在做项目的时候前端需要tab标签来进行角色分类，小编的公司用的是angular，虽然一般情况下angular挺好用的，但是这次例外了，angular的标签并不能良好的达到我想要的效果，于是小编找了一个html改装的tab，如下： html内容如下 &amp;lt;div class=&quot;tabs&quot;&amp;gt; &amp;lt;div class=&quot;tab-2&quot;&amp;gt
灵活运用tab标签(页面内使用)
m0_62396886的博客
04-23 169
【代码】灵活运用tab标签(页面内使用)
Vue3标签页（Tabs）
Mr Dear的博客
04-18 6693
选项卡切换组件，支持：卡片式标签页；禁用某一项；居中展示；左右滑动；三种尺寸；自定义内容；总之，功能丰富，简单易用😁😁
js利用tab键切换当前页面_JS 实现 Tab标签切换功能
weixin_39537298的博客
12-20 455
效果图：HTML部分:标签一标签二标签三 内容一内容一 内容二内容二 内容三内容三 CSS:*{margin:0;padding:0;}.wrap{width:500px;margin:10pxauto; }#tag{width:498px;overflow:hidden;background:#000;border:1pxsolid#000; }#tag li{list-style:n...
纯css半圆角tab标签切换代码
06-10
纯CSS实现的Tab标签切换可以提供更加高效、简洁的交互体验，而无需依赖JavaScript等编程语言。本项目名为“纯css半圆角tab标签切换代码”，它包含了六个HTML文件，每个文件代表一种不同的Tab状态或布局，用于实现...
基于Bootstrap实现tab标签切换效果
09-02
在本实例中，我们看到如何利用Bootstrap来实现tab标签切换效果，这个功能在许多网站中都很常见，比如用于展示不同内容板块。 首先，引入Bootstrap的相关CSS和JavaScript文件是必不可少的。在`<head>`部分，我们引用...
JS用户中心tab标签切换菜单
10-15
java web用户中心tab标签切换菜单
js实现的tab标签切换效果代码分享
11-23
【JavaScript Tab标签切换效果详解】 在网页设计中，Tab切换是一种常见的交互效果，它允许用户在不同的内容区域之间切换，而无需加载新的页面。这里我们介绍一个基于纯JavaScript实现的Tab标签切换效果，无需依赖...
jquery多图tab标签切换焦点图
06-09
"jQuery多图tab标签切换焦点图"是这样一种特效，它结合了jQuery库的强大功能和tab标签的简洁布局，使得多张图片可以按照预设的顺序或者用户的选择进行切换。下面我们将深入探讨这一主题。 首先，jQuery是一个轻量级...
HTML小白入门学习-表格标签
weixin_45125466的博客
02-08 1575
话说上文，我们对HTML的表单类标签进行简单的学习和认识， 分别是<form>、<input>、<textarea>、<label>、<select>和<button>这几个标签。与表单标签有一字之别的表格标签，就是本文的主角。本篇文章将带着大家认识HTML标签中较为常用的表格标签。table标签用来表示一个表格，表格的组成我们有很多角度可以剖析，比如一个表格是由行和列组成的，比如一个表格是由表头和表主体组成的，再比如一个表格是由一个个单元格组成的。
tab标签
weixin_34092370的博客
09-10 137
---恢复内容开始--- 9.10 1、属性:表示事物的一些特征 标签属性:<img src="1.jpg" width="100px" height="100px"> 　 样式属性:<style> 　　　　　　　　　　p{ 　　　　　　　　　　 color:red; 　　　　　　　　　　 } 　　　　　　</style> ...
实现tab标签的切换以及表格中数据根据值不同而表现的样式不同
qq_44952391的博客
07-13 2021
实现tab标签的切换以及表格中数据根据值不同而表现的样式不同 1、实现tab标签的切换 效果：点击所有任务，切换到所有任务表格，点击待进行任务，切换到待进行任务表格。。。 实现：tab标签上均设置上点击事件 changeNum(1)，对应内容用v-show="num===1"来显示和隐藏 在data属性中设置默认初始num=1, 方法中写changeNum方法： // 切换显示不同的任务列表 changeNum(index){ this.num =
Js面向对象案例01：tab标签
胡图图的博客
05-28 241
运行效果 html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>面向对象编程</title> </head> <body> <div i
XHTML 简介
最新发布
lly202406的博客
08-09 415
XHTML作为一种基于XML的标记语言，曾在一段时间内成为网页内容的标准格式。它的严格语法规则和良好的兼容性为网页设计和开发带来了便利。然而，随着HTML5的崛起，XHTML逐渐淡出了人们的视野。尽管如此，XHTML在推动网页技术发展方面所做出的贡献仍然值得我们铭记。
css实现tab标签切换
05-26
可以使用以下代码实现tab标签切换： HTML代码： ```html <div class="tab"> <button class="tablinks" onclick="openTab(event, 'tab1')">标签1 <button class="tablinks" onclick="openTab(event, 'tab2')">...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值