JS通用选项卡

最新推荐文章于 2021-06-03 19:57:37 发布
最新推荐文章于 2021-06-03 19:57:37 发布
阅读量415 收藏
点赞数
分类专栏： JS+CSS+DIV常用效果 文章标签： containers firefox class div float function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a272503680/article/details/7462507
版权
<!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" >
#titleLabelJSId li {
       /*设置ID为Label的元素下所有li元素样式，主要是要设置float:left这个属性，这样才能将li元素排成一排；同时设置了list-style:none这个属性，目的是防止li元素出现实心圆点*/
       margin-left: 1px ;
       padding: 3px ;
       width: 50px ;
       background-color: #94A5F8 ;
       float: left ;
       list-style: none ;
       cursor: pointer ;
}

#titleLabelJSId .currentLabel {
       background-color:#0f0 ;
}
</style>
</head>
<body>

<!--我们将第一个标签的背景色设置红色(class="currentLabel")，因为默认显示的是第一个标签的内容-->
<ul id= "titleLabelJSId">
       <li class="currentLabel" >标签1</ li>
       <li> 标签2</li >
       <li> 标签3</li >
</ul>
<div style="clear : both;"></div >
<!--因为默认是不显示的，所以要将display属性设置为none-->
<div id= "containerDivJSId">
       <div> 这时里是标签1对应的内容 </div>
       <div style="display : none">这时里是标签2对应的内容 </div>
       <div style="display : none"> 这时里是标签3对应的内容 </div>
</div>
<script language="javascript" type="text/javascript">
/**
 * 显示当前选中的ul中li所对应div中某一个，其它的都隐藏，同时将li的class值置为curClass，其它的都清空
 * @param obj oCur ： 当前选中的ul中li的对象
 * @param string titleId : ul标签的id值
 * @param string containerId : ul标签所对应内容的div的id值
 * @param string curClass : ul标签中li当前选中时class值
 */
function changeLabel(oCur, titleId, containerId, curClass)
{
       var containers = document.getElementById(containerId).childNodes; //获取所有的内容元素子节点
      var labels = document.getElementById(titleId).childNodes; //获取所有的标签
      var length = containers.length;;
       for(var iLoop = 0; iLoop < length; iLoop ++)
      {
             var container = containers[iLoop];
             var label = labels[iLoop];
             var current = iLoop == oCur.value; //根据索引是否为li元素的value值来判断是否为当前标签
            if ("DIV" == container.nodeName) { container.style.display = current ? "block" : "none";}
             if ("LI" == label.nodeName) { label.className = current ? curClass : "" ;}
      }
} 

/**
 * 对所有子节点进行循环，增加onmouseover事件，也可以根据需要添加onclick事件
 * @param string titleId : ul标签的id值
 * @param string containerId : ul标签所对应内容的div的id值
 * @param string curClass : ul标签中li当前选中时class值
 */
function labelAddEvent(titleId, containerId, curClass)
{
       var labels = document.getElementById(titleId).childNodes; //获取ID为Label无素下的所有子节点，childNodes是DOM的一个属性
      var length = labels.length;
       //对所有子节点进行循环，增加onmouseover事件，也可以根据需要添加onclick事件
      for (var iLoop = 0; iLoop < length; iLoop ++)
      {
             var label = labels[iLoop];
             if ("LI" == label.nodeName) //只处理LI的DOM节点，目的是为了兼容Firefox，因为Firefox会把空格与换行与当成一个节点处理
            {
                  label.value = iLoop; //为每一个标签的value赋上当前的索引，当点击标签的时候不用循环标签就知道是哪一个标签了
                  label.onmouseover = function(){ changeLabel(this, titleId, containerId, curClass);} //调用ChangeLabel函数，并把当前对象传过去
            }
      }
}
labelAddEvent('titleLabelJSId', 'containerDivJSId', 'currentLabel' );
</script>
</body>
</html>
a272503680
关注
专栏目录
JS实现侧边选项卡功能
程序员小陈的博客
07-17 1097
**一、简述：**通过JS实现简单的选项卡功能，本示例是左右布局，要实现上下布局只需更改样式即可。 **二、功能介绍：**页面初始第一个选项——此示例为“第一天”为选中状态，对应右侧的内容——“学习HTML基础”，当鼠标点击第二个选项——此处为“第二天”，右侧出现对应内容——“学习CSS基础”……以此类推，实现点击左侧选项右侧出现相应内容。 ** 功能实现图 ** （后边依次类推） 页面内容编写——HTML <!DOCTYPE html> <html> <head&gt
JavaScript--选项卡
huijie_0716的博客
04-21 217
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &...
前端如何使用js实现选项卡功能
蒋伟平的博客
03-28 1319
选项卡是前端常见的基本功能，它是用多个标签页来区分不同内容，可以通过选择标签快速切换内容。学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascript基础。 先来完成html部分。首先，需要一个元素把整个选项卡包含在内。新建一个div元素，它的id命名为tabBox，如下所示： <div id="tabBox"></div> 在tabBox元素里...
html table选项卡,javascript 通用简单的table选项卡实现
weixin_39970855的博客
06-03 247
第一步：引用table.js第二步：定义选中的样式，比如“active”，应用选项卡的块的ID，比如“sidebar”，默认被选中的序号，比如第一个“0”；第三步：调用函数：//参数分别为：默认选择项 应用块的id 选中的样式table(0, "sidebar", "active")一切OK，选项卡响应click事件，兼任IE和FF，等有时间了再优化，效果如下：HTML源代码如下：New Web ...
php tab选项卡 js,基于JavaScript实现通用tab选项卡(通用性强)
weixin_42522817的博客
04-11 159
选项卡在大量的网站都有应用，虽然形式各有不同，但是索要达成的目的都是一样的，一般都是为了进行分类或者节省网页空间只用，算是一件利器，下面就是一个选项卡的代码实例，通用性很强，下面就和大家分享一下。代码实例如下:js实现的可以通用的选项卡代码实例body {text-align:center;}.tab1, .tab2{width:350px;margin:0 5px;background:#CC9...
html5打开浏览器选项卡,选项卡跨浏览器切换 JS
weixin_30249151的博客
06-03 550
环境：①跨浏览器，IE6+，FF，Chrome，Safari，Opera②同一个页面可以用同一个js设置不同的选项卡。一、html部分(其实这还没啥好看的，设置了三个，前两个是一样的，通过click事件触发，最后一个通过鼠标移动触发)class="name">项目一项目二项目三class="content">类为"tab1"项目一内容,通过"click"触发类为"tab1"项目二内容...
jQuery实现tab选项卡切换
HJay_Chou的博客
06-16 1516
文章目录项目效果 项目 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>07-tab选项卡</title> <style> *{ margin: 0; ...
纯 CSS+JS 通用选项卡
雪峰的专栏
09-09 1427
请看源码吧，各段都有详细注释。 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">选项卡/*核心：选项页切换：先把各选项内容块设置成 display: none，再把当前选项的 .tabOn .tabContentBox 设置为 display: block;选项页是
php tab选项卡 js,纯php打造的tab选项卡效果代码(不用js)
weixin_32458131的博客
04-11 88
1.根据get判断，获取get生成css复制代码代码如下:if(!isset($_GET['city_id'])){$city_id=12;}else{$city_id=$_GET['city_id'];}echo'.a'.$city_id.'{color:red;}';for($i=12;$i<=16;$i++){if($i!=$city_id){if($i!=12){echo'.list...
跨浏览器通用、可重用的选项卡tab切换js代码
12-11
①跨浏览器，IE6+，FF，Chrome，Safari，Opera ②同一个页面可以用同一个js设置不同的选项卡。 说太多没啥米用，来看代码吧。 一、html部分（其实这还没啥好看的，设置了三个，前两个是一样的，通过click事件触发，...
javascript 通用简单的table选项卡实现
12-02
在JavaScript中实现一个通用且简单的表格选项卡功能可以极大地提升用户界面的交互性。这个教程主要涉及以下几个关键知识点： 1. **外部JavaScript引用**：在HTML文档中，通过`<script>`标签引用外部JS文件（如`...
基于JavaScript实现通用tab选项卡(通用性强)
10-23
JavaScript实现通用Tab选项卡涉及的前端开发知识点主要包括HTML、CSS和JavaScript的基础应用。下面将对这些知识点进行详细解释，以帮助理解如何创建一个通用性强的选项卡。 1. HTML结构设计： 在页面中，选项卡通常...
js通用的tab选项卡切换图片
11-22
在JavaScript（JS）编程中，实现“通用的tab选项卡切换图片”功能是一项常见的需求，尤其是在网页设计中。这个功能允许用户通过点击不同的tab按钮来切换显示不同的内容，通常是图片或者其他富媒体。以下是对这一技术...
JS学习笔记18-面向对象方式的选项卡
欢迎访问我的主页：https://www.bookbook.cc
05-19 8290
文章目录一、使用面向对象写一个选项卡1.1 先用面向过程写一个选项卡1.2 正式开始使用面向对象写一个选项卡1.2.1、解决函数嵌套1.2.2 pass掉window.onload1.2.3 把变量作为属性 函数变为方法 并且改错 、传参、闭包 一、使用面向对象写一个选项卡 1.1 先用面向过程写一个选项卡 在使用面向对象写一个选项卡的时候，我们还是先用面向过程来写一个选项卡，如下： <body> <div id="div1"> <input class
jquery精确楼层定位
a272503680的专栏
11-21 3482
window.onload = function(){        var floor = {count($arr_data)+($page-1)*5};        var str = location.hash;        if(str)       {              var id = str.replace('#' , '' );
仿淘宝/蘑菇街形式，瀑布流效果 -- 固定列数
a272503680的专栏
11-02 2731
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> 瀑布流实
js硬绑定img的onload事件的思路
a272503680的专栏
11-21 1407
1. 在php端用正则匹配出img标签 2. 用strpos + strsub 函数拼接 onload="resize(this)" 3. 在前端的head标签里面编写resize函数 js硬绑定的好处： 以最快时间响应事件。 //img硬绑定onload事件, 123宝贝网(www.123baby.net) if (preg_match_all('@(<img [^>]
js实现select选中特定项
a272503680的专栏
04-15 1272
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
JavaScript实现高度通用的选项卡功能
以上就是基于JavaScript实现通用选项卡的基本步骤。通过这种方式，我们可以创建一个可复用的组件，适用于不同的项目。需要注意的是，实际应用中可能还需要考虑其他因素，比如响应式设计、无障碍访问（A11y）以及与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值