`
正斌charles
  • 浏览: 38050 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

【JS常用代码】选项卡切换效果 (一)

阅读更多
选项卡切换效果



1.选项卡和层一起切换的效果

    function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
   2.只切换选项卡效果

       function setonlyTab(name,cursel,n){
            for(i=1;i<=n;i++){
                var menu=document.getElementById(name+i);
                menu.className=i==cursel?"hover":"";
            }
        }
分享到:
评论

相关推荐

    JavaScript大全 常用JS效果代码

    这个压缩包文件“JavaScript大全 常用JS效果代码”显然包含了一系列实用的JavaScript代码片段,旨在帮助开发者快速实现常见的网页特效和功能。 1. **JS特效**:JavaScript能够创造出丰富的用户体验,如滑动门、轮播...

    移动端选项卡切换,滑动切换

    移动端选项卡切换是网页设计中常用的一种交互方式,特别是在移动设备上,由于屏幕空间有限,这种设计能够有效地组织信息并提高用户体验。通常,选项卡会展示多个相关的、独立的部分,用户可以通过点击或滑动来切换...

    jQuery图标导航选项卡切换代码.zip

    本项目“jQuery图标导航选项卡切换代码”利用jQuery的功能实现了一个图标导航与图片切换的效果,为用户提供了一种直观且吸引人的交互体验。下面我们将深入探讨这个项目的核心知识点。 首先,选项卡式导航(Tabbed ...

    JavaScript实现Tab选项卡切换

    JavaScript实现Tab选项卡切换效果是前端开发中常见的交互功能,它可以让用户在不同的内容区域之间快速切换,而不需要重新加载页面。这种效果通常应用在产品介绍、新闻列表、文章分类展示等多个场景中,目的是为了...

    jquery常用的网站新闻类别选项卡代码.zip

    "jquery常用的网站新闻类别选项卡代码.zip"是一个包含资源的压缩包,很可能提供了一套实现新闻类别选项卡切换效果的jQuery代码示例。这种效果常见于许多网站的新闻或博客板块,通过选项卡可以方便地展示不同类别的...

    swiper.js手机触屏滑动选项卡标签切换代码.zip

    Swiper.js是一款强大的触摸滑动库,特别适合用于创建手机和平板设备上的滑动效果,如选项卡切换、轮播图、幻灯片等。它提供了丰富的API和配置选项,可以方便地定制各种滑动行为,是前端开发中的常用工具之一。在...

    Bootstrap Tabs选项卡切换代码.zip

    选项卡切换是网页设计中常用的一种交互元素,它允许用户在有限的空间内展示多个独立的内容板块,而只需显示一个板块的内容。 在Bootstrap框架中,选项卡组件是基于HTML、CSS和JavaScript(主要是jQuery)构建的。...

    【JavaScript源代码】JS实现多重选项卡切换轮播图.docx

    ### JavaScript 实现多重选项卡切换轮播图 #### 轮播图概念及应用场景 轮播图(也称为幻灯片、轮播组件)是一种在网页设计中常用的交互元素,通常用于展示一系列图像或者带有文字描述的信息。它可以通过鼠标点击、...

    javascript实现tabs选项卡切换效果(自写原生js)

    今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出。 效果图如下: html代码: 代码如下: &lt;!DOCTYPE HTML&gt; &lt;html lang=”en-US”&gt; &lt;head&gt; &lt;meta charset=”...

    jQuery上下滑动选项卡切换代码.zip

    在本资源中,"jQuery上下滑动选项卡切换代码.zip" 提供了一个适用于移动应用(app)商家介绍的滑动选项卡切换功能的JavaScript实现。这个功能通常用于展示多个内容板块,用户可以通过上下滑动来浏览不同的信息,提高...

    简单的jquery tab选项卡切换代码样式

    "简单的jquery tab选项卡切换代码样式"是指利用jQuery实现的一种常见用户界面元素——选项卡(Tab)的交互功能。选项卡是网页设计中常用的布局方式,它可以有效地组织和展示大量内容,提高用户体验。下面我们将详细...

    垂直选项卡竖版选项卡切换文字列表源码下载

    "垂直选项卡竖版选项卡切换文字列表源码下载" 这个标题揭示了我们讨论的核心内容,即一个适用于网页设计的源码实现。它特别提到了“垂直选项卡”和“竖版选项卡切换”,这意味着源码提供了一种布局方式,使得在网页...

    jQuery tab选项卡图文列表内容切换代码

    在本示例中,“jQuery tab选项卡图文列表内容切换代码”是一个利用jQuery实现的动态功能,它允许用户通过点击或悬停在选项卡上,来切换显示不同的图文列表内容。这个功能在网站上很常见,如产品展示、新闻列表或者...

    jquery选项卡插件多种tab标签切换效果

    总结来说,"jquery选项卡插件多种tab标签切换效果"涵盖了从基本的选项卡切换到高级的交互功能,包括动态加载、过渡动画、键盘和触摸事件支持以及响应式设计。掌握这些技术可以帮助开发者创建更吸引用户、更易用的Web...

    焦点图选项卡切换图片滚动三合一jquery插件

    【焦点图选项卡切换图片滚动三合一jQuery插件】是一种高效、灵活的Web前端解决方案,它结合了焦点图、选项卡切换和图片滚动这三种功能,以提升网站用户体验和交互性。这种插件广泛应用于产品展示、新闻资讯、轮播...

    JS网站常用简洁TAB选项卡.zip

    在网页设计中,选项卡(TAB)是一种常见的交互元素,用于组织和展示大量信息,而JavaScript(JS)作为客户端脚本语言,常被用来实现这些动态效果。"JS网站常用简洁TAB选项卡"是一个专为网页开发设计的资源,旨在提供...

    常用新闻分类TAB选项卡js特效.zip

    为了使选项卡切换更加平滑,可以添加过渡动画。例如,使用CSS的`transition`属性可以轻松实现淡入淡出、滑动等效果。 5. 自动轮播: 对于新闻类网站,可能还需要添加自动轮播功能,定时切换选项卡。这可以通过...

    jquery hover鼠标滑过选项卡切换.zip

    本教程将深入探讨如何利用jQuery的hover事件实现一个鼠标滑过选项卡切换的效果,这对于创建交互式用户界面至关重要。 首先,我们要了解jQuery的核心概念。jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件...

    mui选项卡切换和下拉刷新加载数据列表代码.rar

    本压缩包"mui选项卡切换和下拉刷新加载数据列表代码.rar"包含了实现`mui`选项卡切换功能以及下拉刷新、上拉加载更多数据列表的代码示例。 一、`mui`选项卡切换 `mui`中的选项卡切换功能是通过`mui.tabs`组件实现的...

Global site tag (gtag.js) - Google Analytics