首页技术博客 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;

推荐阅读

ip
解决Bootstrap DataTable Ajax请求重复问题

在最近的一个项目中，我们使用了JQuery DataTable进行数据展示，虽然使用起来非常方便，但在测试过程中发现了一个问题：当查询条件改变时，有时查询结果的数据不正确。通过FireBug调试发现，点击搜索按钮时，会发送两次Ajax请求，一次是原条件的请求，一次是新条件的请求。 ... [详细]

蜡笔小新 2024-11-12 13:59:27
config
Hibernate实战笔记14：深入解析反向工程技术

在处理遗留数据库的映射时，反向工程是一个重要的初始步骤。由于实体模式已经在数据库系统中存在，Hibernate 提供了自动化工具来简化这一过程，帮助开发人员快速生成持久化类和映射文件。通过反向工程，可以显著提高开发效率并减少手动配置的错误。此外，该工具还支持对现有数据库结构进行分析，自动生成符合 Hibernate 规范的配置文件，从而加速项目的启动和开发周期。 ... [详细]

蜡笔小新 2024-11-04 18:29:37
config
com.sun.javadoc.PackageDoc.exceptions()方法的使用及代码示例

com.sun.javadoc.PackageDoc.exceptions()方法的使用及代码示例 ... [详细]

蜡笔小新 2024-11-13 10:47:33
ip
javascript分页类支持页码格式

前端时间因为项目需要，要对一个产品下所有的附属图片进行分页显示，没考虑ajax一张张请求，所以干脆一次性全部把图片out，然 ... [详细]

蜡笔小新 2024-11-12 14:58:57
ip
JavaWeb文件上传：前端实现与后端处理详解

在JavaWeb开发中，文件上传是一个常见的需求。无论是通过表单还是其他方式上传文件，都必须使用POST请求。前端部分通常采用HTML表单来实现文件选择和提交功能。后端则利用Apache Commons FileUpload库来处理上传的文件，该库提供了强大的文件解析和存储能力，能够高效地处理各种文件类型。此外，为了提高系统的安全性和稳定性，还需要对上传文件的大小、格式等进行严格的校验和限制。 ... [详细]

蜡笔小新 2024-11-11 19:50:46
ip
Web开发框架概览：Java与JavaScript技术及框架综述

Web开发涉及服务器端和客户端的协同工作。在服务器端，Java是一种优秀的编程语言，适用于构建各种功能模块，如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示，同时借助JavaScript增强交互性和动态效果。此外，现代Web开发还广泛使用各种框架和库，如Spring Boot、React和Vue.js，以提高开发效率和应用性能。 ... [详细]

蜡笔小新 2024-11-09 11:59:38
object
全面解析 jQuery 中的 $.extend()、$.fn 与 $.fn.extend() 方法及其应用

本文深入解析了 jQuery 中用于扩展功能的三个关键方法：`$.extend()`、`$.fn` 和 `$.fn.extend()`。其中，`$.extend()` 用于扩展 jQuery 对象本身，而 `$.fn.extend()` 则用于扩展 jQuery 的原型对象，使自定义方法能够作为 jQuery 实例的方法使用。通过这些方法，开发者可以轻松地创建和集成自定义插件，增强 jQuery 的功能。文章详细介绍了每个方法的用法、参数及实际应用场景，帮助读者更好地理解和运用这些强大的工具。 ... [详细]

蜡笔小新 2024-11-09 10:08:04
ip
关于使用JavaScript在多个页面间传递参数的技术探讨

本文探讨了使用JavaScript在不同页面间传递参数的技术方法。具体而言，从a.html页面跳转至b.html时，如何携带参数并使b.html替代当前页面显示，而非新开窗口。文中详细介绍了实现这一功能的代码及注释，帮助开发者更好地理解和应用该技术。 ... [详细]

蜡笔小新 2024-11-09 09:28:55
object
深入理解 JavaScript 函数式编程技巧与应用（下篇）

本文将继续探讨 JavaScript 函数式编程的高级技巧及其实际应用。通过一个具体的寻路算法示例，我们将深入分析如何利用函数式编程的思想解决复杂问题。示例中，节点之间的连线代表路径，连线上的数字表示两点间的距离。我们将详细讲解如何通过递归和高阶函数等技术实现高效的寻路算法。 ... [详细]

蜡笔小新 2024-11-08 19:44:31
char
Scala学习指南：从零开始掌握基础

本指南从零开始介绍Scala编程语言的基础知识，重点讲解了Scala解释器REPL（读取-求值-打印-循环）的使用方法。REPL是Scala开发中的重要工具，能够帮助初学者快速理解和实践Scala的基本语法和特性。通过详细的示例和练习，读者将能够熟练掌握Scala的基础概念和编程技巧。 ... [详细]

蜡笔小新 2024-11-07 18:07:59
select
在Android 4.4中从相册选择图片并获取其路径的方法详解

在Android 4.4系统中，通过使用 `Intent` 对象并设置动作 `ACTION_GET_CONTENT` 或 `ACTION_OPEN_DOCUMENT`，可以从相册中选择图片并获取其路径。具体实现时，需要为 `Intent` 添加相应的类别，并处理返回的 Uri 以提取图片的文件路径。此方法适用于需要从用户相册中选择图片的应用场景，能够确保兼容性和用户体验。 ... [详细]

蜡笔小新 2024-11-06 11:02:36
config
HBase Java API 进阶：过滤器详解与应用实例

本文详细探讨了HBase 1.2.6版本中Java API的高级应用，重点介绍了过滤器的使用方法和实际案例。首先，文章对几种常见的HBase过滤器进行了概述，包括列前缀过滤器（ColumnPrefixFilter）和时间戳过滤器（TimestampsFilter）。此外，还详细讲解了分页过滤器（PageFilter）的实现原理及其在大数据查询中的应用场景。通过具体的代码示例，读者可以更好地理解和掌握这些过滤器的使用技巧，从而提高数据处理的效率和灵活性。 ... [详细]

蜡笔小新 2024-11-05 15:08:18
ip
探究HTML5应用中的三种Accordion交互效果

在HTML5应用中，Accordion（手风琴，又称抽屉）效果因其独特的展开和折叠样式而广泛使用。本文探讨了三种不同的Accordion交互效果，通过层次结构优化信息展示和页面布局，提升用户体验。这些效果不仅增强了视觉效果，还提高了内容的可访问性和互动性。 ... [详细]

蜡笔小新 2024-11-04 18:09:29
match
织梦系统多条件联动筛选功能详细教程及删除操作指南

多条件联动筛选功能广泛应用于图片展示、装修设计、机械设备和在线商城等场景，通常筛选条件应聚焦于用户最关心的要素，而非涵盖所有可能的选项。在DedeCMS中，多条件筛选的PHP开发并未内置删除已选条件的功能，但通过理解PHP筛选与JS筛选的不同机制，实现这一功能相对简单且易于操作。 ... [详细]

蜡笔小新 2024-11-01 16:21:47
ip
jQuery Flot 数据可视化插件：高效绘制图表的专业工具

jQuery Flot 是一款高效的数据可视化插件，专为绘制各种图表而设计。该工具支持丰富的图表类型和自定义选项，适用于多种应用场景。用户可以通过其官方网站获取示例代码和下载资源，以便快速上手和使用。 ... [详细]

蜡笔小新 2024-11-01 12:28:23

汶汐_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社区版权所有