首页技术博客 PHP教程数据库技术前端开发 HTML5 Nginx php论坛

新用户注册 | 会员登录

热门标签 | HotTags

当前位置: 开发笔记 > 编程语言 > 正文

HTML怎么用js展开全部,js实现选项卡内容切换以及折叠和展开效果【推荐】

作者：汶汐_782 | 来源：互联网 | 2023-08-07 22:47

1.选项卡效果预览2.源码与简要说明切换选项卡功能实现星期一11-07星期二11-08星期三11-09星期四11-10星期五11-11星期六11-12星期日11-13播出频道时间节

1.选项卡效果预览

2.源码与简要说明

切换选项卡功能实现

播出频道时间节目

安徽卫视2016/11/07天气预报CCTV2016/11/07天气预报广东卫视2016/11/07天气预报甘肃卫视2016/11/07天气预报

播出频道时间节目

安徽卫视2016/11/07天气预报CCTV2016/11/07天气预报广东卫视2016/11/07天气预报甘肃卫视2016/11/07天气预报

播出频道时间节目

安徽卫视2016/11/07天气预报CCTV2016/11/07天气预报广东卫视2016/11/07天气预报甘肃卫视2016/11/07天气预报安徽卫视2016/11/07天气预报CCTV2016/11/07天气预报广东卫视2016/11/07天气预报甘肃卫视2016/11/07天气预报

播出频道时间节目

安徽卫视2016/11/08天气预报CCTV2016/11/08天气预报

播出频道时间节目

安徽卫视2016/11/09天气预报CCTV2016/11/09天气预报

播出频道时间节目

安徽卫视2016/11/10天气预报CCTV2016/11/10天气预报

播出频道时间节目

安徽卫视2016/11/11天气预报CCTV2016/11/11天气预报

播出频道时间节目

安徽卫视2016/11/12天气预报CCTV2016/11/12天气预报

播出频道时间节目

安徽卫视2016/11/12天气预报CCTV2016/11/12天气预报

播出频道时间节目

安徽卫视2016/11/13天气预报CCTV2016/11/13天气预报

switchTab.css 选项卡样式小技巧简要说明

对于选项卡未选中时利用边框透明border-color: rgba(0,0,0,0);&＃xff1b;选中后边框顶部颜色border-top-color显示&＃xff0c;

这一技巧从而减少其选项卡盒子模型的计算

* Author Zhangjiangfeng

* Date 2016/11/9 PM 20:35 night

* 选项卡样式实现

font-family: "微软雅黑";

font-size: 12px;

div, ul, li, p, a {

background-color: #fafafa;

position: relative;

display: inline-block;

list-style: none;

font-size: 0; /*消除display: inline-block间隙*/

border-bottom: 1px solid #d9d9d9;

margin-bottom: -2px;

ul.main-tab li {

display: inline-block;

padding-top: 4px;

border-width: 2px 1px 0;

border-color: #999;

border-style: solid;

border-color: rgba(0,0,0,0);

_border-color:tomato;

_filter:chroma(color&＃61;#ff6347);

ul.main-tab li a {

display: inline-block;

text-decoration: none;

ul.main-tab li p {

font-size: 12px;

line-height: 20px;

padding: 0 20px;

/*利用边框的透明从而减少li盒子计算样式*/

ul.main-tab li {

border-width: 2px 1px 0;

border-top-color: #19A6A6;

border-left-color: #d9d9d9;

border-right-color: #d9d9d9;

border-style: solid;

border-color: rgba(0,0,0,0);

/* ul.main-tab li:hover {

border-width: 2px 1px 0;

border-top-color: #19A6A6;

border-left-color: #d9d9d9;

border-right-color: #d9d9d9;

border-bottom: #FFFFFF;

border-style: solid;

background-color: #FFFFFF;

/*选项卡选中样式*/

ul.main-tab li.active {

border-width: 2px 1px 0;

border-top-color: #19A6A6;

border-left-color: #d9d9d9;

border-right-color: #d9d9d9;

border-bottom: #FFFFFF;

border-style: solid;

background-color: #FFFFFF;

/*选项卡内容样式*/

min-height: 250px;

border: 1px solid #d9d9d9;

border-top: none;

position: relative;

display: table;

border-collapse: collapse;

border-bottom: solid 1px #d9d9d9;

.table tr.last-no-border td {

border-bottom: none;

cursor: pointer;

line-height: 30px;

text-align: center;

background-color: #fafafa;

margin-left: 5px;

display: inline-block;

vertical-align: text-bottom;

font-style: normal;

.div-buttn i.c-icon {

background: url(../img/icons.png) no-repeat 0 0;

.div-buttn i.c-icon-bottom {

background-position: -71px -168px;

.div-buttn i.c-icon-top {

background-position:-96px -168px

switchTab-jQuery/switchTab-Javascript思路简要说明

a.切换不同选项卡显示对应内容

b.点击折叠/展开按钮时&＃xff0c;操作的是哪一选项卡对应的内容

3.switchTab-jQuery.js动态效果实现

/*选项卡切换功能借助jQuery实现*/

var $navTab &＃61; $("#nav-tab"); //选项卡对象

var $tabCont &＃61; $(".tab-content"); //选项卡内容

var $tabContList &＃61; $tabCont.find(".table-div"); //选项卡内容列表

var $btnShow &＃61; $(".btn-show"); //显示全部

var $btnCollapse &＃61; $(".btn-collapse"); //折叠

//选项卡事件绑定

$navTab.on("click", "li", function(){

var $that &＃61; $(this);

//获取当前索引值

var navIndex &＃61; $that.attr("index");

//当前点击li添加active类&＃xff0c;同级兄弟节点移除active类

$that.addClass("active").siblings().removeClass("active");

//当当前点击选项卡navIndex值与表格列表索引tabIndex值相等时显示&＃xff0c;否则隐藏

$tabContList.each(function(i){

var $that &＃61; $(this);

var tabIndex &＃61; $that.attr("tab-index"); //表格列表索引

if(navIndex&＃61;&＃61;&＃61;tabIndex){

//设置显示全部与折叠按钮索引值---标识当前选中选项卡

$btnShow.attr("button-index",navIndex);

$btnCollapse.attr("button-index", navIndex);

$btnShow.on("click", function(){

var $that &＃61; $(this);

var btnIndex &＃61; $that.attr("button-index"); //获取当前按钮的索引值

$btnCollapse.show();

$tabContList.each(function(i){

var $that &＃61; $(this);

var tabIndex &＃61; $that.attr("tab-index"); //表格列表索引

if(btnIndex&＃61;&＃61;&＃61;tabIndex){

$btnCollapse.on("click", function(){

var $that &＃61; $(this);

var btnIndex &＃61; $that.attr("button-index"); //获取当前按钮的索引值

$btnShow.show();

$tabContList.each(function(i){

var $that &＃61; $(this);

var tabIndex &＃61; $that.attr("tab-index"); //表格列表索引

if(btnIndex&＃61;&＃61;&＃61;tabIndex){

3.switchTab-Javascript效果实现

/*选项卡切换功能js实现*/

window.onload &＃61; function(){

var oTab &＃61; document.getElementById("nav-tab");

var liArray &＃61; oTab.getElementsByTagName("li");

var tabList &＃61; document.getElementsByClassName("table-div");

var btnShow &＃61; document.getElementsByClassName("btn-show");

var btnCollapse &＃61; document.getElementsByClassName("btn-collapse");

for (var i&＃61;0; i

liArray[i].onclick &＃61; function(){

for (var j&＃61;0; j

//移除class样式

liArray[j].className &＃61; "";

//添加class样式

this.className &＃61; "active";

//获取DOM索引值

var index &＃61; this.getAttribute("index");

btnShow[0].setAttribute("button-index", index);

btnCollapse[0].setAttribute("button-index", index);

for (var t &＃61; 0; t

var tableIndex &＃61; tabList[t].getAttribute("tab-index");

if(index &＃61;&＃61;&＃61; tableIndex){

tabList[t].style.display &＃61; "block";

tabList[t].style.display &＃61; "none";

btnShow[0].onclick &＃61; function(){

var btnIndex &＃61; this.getAttribute("button-index");

//表格index与按钮btnIndex

for (var t &＃61; 0; t

var tableIndex &＃61; tabList[t].getAttribute("tab-index");

if(btnIndex &＃61;&＃61;&＃61; tableIndex){

tabList[t].style.display &＃61; "block";

this.style.display &＃61; "none";

btnCollapse[0].style.display &＃61; "block";

btnCollapse[0].onclick &＃61; function(){

var btnIndex &＃61; this.getAttribute("button-index");

//表格index与按钮btnIndex

for (var t &＃61; 0; t

var tableIndex &＃61; tabList[t].getAttribute("tab-index");

if(btnIndex &＃61;&＃61;&＃61; tableIndex){

tabList[t].style.display &＃61; "none";

this.style.display &＃61; "none";

btnShow[0].style.display &＃61; "block";

以上就是本文的全部内容&＃xff0c;希望本文的内容对大家的学习或者工作能带来一定的帮助&＃xff0c;同时也希望多多支持脚本之家&＃xff01;

推荐阅读

input
HTML制作简单首页导航

h1大标题：李广程的作业列表查看演示地址一：http:js.lgcweb.cn查看演示备用地址：http:39.105.0.128Ja ... [详细]

蜡笔小新 2023-10-13 10:18:22
input
使用HTML创建弹出框以便用户输入信息

在做项目的过程中，我们时常需要进行一些弹框操作，比如在后台管理时需要进行的一些增删改操作，这个时候我们需要使用到弹框，或者在 ... [详细]

蜡笔小新 2023-10-14 08:49:35
select
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
select
实现下拉列表，点击其他位置自动隐藏效果的三种方式比较

目录实现效果：实现环境实现方法一：基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]

蜡笔小新 2023-12-14 15:03:14
select
Voicewo在线语音识别转换jQuery插件的特点和示例

本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

蜡笔小新 2023-12-13 20:01:16
select
从零基础到精通的前台学习路线

随着互联网的发展，前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线，包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习，可以掌握前台开发的基本技能，并有能力找到一份月薪8000以上的工作。 ... [详细]

蜡笔小新 2023-12-10 20:05:15
select
为什么三角形与菜单背景的颜色不同？ - Why is the triangle a different colour shade to the menu background?

Imnotunderstandingastowhythetrianglewhichappearswhenthemousehoversoverthemenuitem, ... [详细]

蜡笔小新 2023-10-16 11:26:13
select
一个css属性值优先于另一个 - Priority of one css attribute value over another

ForabuttonIhave3possibleclasses:state-normal,state-focusandstate-hover.Allhaveth ... [详细]

蜡笔小新 2023-10-13 12:23:05
select
微信小程序 button、checkbox、radio组件

微信小程序的button、checkbox、radio三个组件都属于表单组件官方参考文档：https:developers.weixin.qq.comminiprog ... [详细]

蜡笔小新 2023-10-13 09:23:58
input
学习过程-京东注册的静态界面

HTML源代码：<!DOCTYPEhtml><html><head><title>京东注册<title><me ... [详细]

蜡笔小新 2023-10-12 23:40:09
input
如何在输入字段中使用默认值的方法及代码

本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时，使用50作为默认值；当输入字段填充有-20或更多（负数）时，使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码，用于动态地根据条件使用默认值。 ... [详细]

蜡笔小新 2023-12-10 12:35:46
select
jQuery实现简单的动画效果及用法详解

本文详细介绍了使用jQuery实现简单动画效果的方法，包括显示/隐藏、向上收缩/向下展开、淡入/淡出、自定义动画等。同时提供了具体的用法示例，并解释了参数的含义和使用技巧。通过本文的学习，读者可以掌握如何使用jQuery实现各种动画效果，为网页增添生动和互动性。 ... [详细]

蜡笔小新 2023-12-10 12:09:52
select
如何在Jquery中通过其样式值获取元素

本文介绍了如何在Jquery中通过元素的样式值获取元素，并将其赋值给一个变量。提供了5种解决方案供参考。 ... [详细]

蜡笔小新 2023-12-10 04:03:11
select
获取ul中第一个li元素的五种方法和多个ul中第一个li元素的四种方法

本文介绍了获取ul中第一个li元素的五种方法和多个ul中第一个li元素的四种方法，包括使用jQuery的选择器和遍历方法。通过这些方法，可以方便地获取到所需的元素，并进行相应的操作。 ... [详细]

蜡笔小新 2023-12-09 10:26:04
select
如何压缩网站页面以减少页面加载时间

本文介绍了影响网站打开时间的两个因素，即网页加载速度和网站页面大小。重点讲解了如何通过压缩网站页面来减少页面加载时间。具体包括图片压缩、Javascript压缩、CSS压缩和HTML压缩等方法，并推荐了相应的压缩工具。此外，还提到了一款Google Chrome插件——网页加载速度分析工具Speed Tracer。 ... [详细]

蜡笔小新 2023-12-09 09:17:00

汶汐_782

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章

PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved |

京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区版权所有