`
baukh789
  • 浏览: 27656 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

简易tabs切换

阅读更多

把很常用的tbas切换功能封装成一个小插件,喜欢的可以拿去用下。

用的是面向对象的写法,留有初始化方法,如果不需要配置,直接调用JS就行。

支持同页面多Tabs切换,不受数量影响,对HTML布局较放松。

样式就是简单的写了一下。只是一个很小的东西,请勿喷。

只是简单的测试了下,如果发现有问题可留言。

/*
		可传参数
		$arg.tabsArea     :切换所在的容器
		$arg.tabs_tag     :标签切换事件源
		$arg.tabs_content :标签切换内容区
		$arg.isOpenFirst  :是否在初始展开第一个标签的内容
	*/
	var pre = {
		isOpenFirst : true
		}
	Au_tabs.init(pre);

 

<div class="tabsArea">
	<div class="title_Area">
    	<span class="tabs_tag">标签一</span>
    	<span class="tabs_tag">标签二</span>
    </div>
	<div class="content_Area">
    	<p class="tabs_content">
         内容一
        </p>
    	<p class="tabs_content">      
         内容二
        </p>
    </div>
</div>

 

<div class="tabsArea">
    <span class="tabs_tag">标签一</span>
    <span class="tabs_tag">标签二</span>
    <p class="tabs_content">
    内容一
    </p>
    <p class="tabs_content">       
    内容二
    </p>
</div> 

 

  • Au_tabs.zip (459.8 KB)
  • 描述: 只是个DEMO,样式没有细做
  • 下载次数: 2
分享到:
评论

相关推荐

    简易的tabs切换特效,易用新手

    简易的tabs切换特效,易用新手,简单的一个for循环,点击切换显隐

    简易版的jquery tabs

    标题中的“简易版的jquery tabs”指的是一个使用jQuery库实现的简单版标签页功能。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。在网页设计中,标签页(tabs)...

    【JavaScript源代码】JavaScript实现简易tab栏切换案例.docx

    JavaScript 实现简易 tab 栏切换是一种常见的网页交互功能,它允许用户通过点击不同的选项卡来切换显示的内容。在本文中,我们将深入理解如何使用 JavaScript 来实现这一效果,并结合给出的代码片段进行详细讲解。 ...

    【JavaScript源代码】JavaScript实现简易tab栏切换内容栏.docx

    在JavaScript实现简易tab栏切换内容栏的过程中,我们通常会结合HTML、CSS以及JavaScript来创建一个交互式的用户界面。以下是对这个实例的详细解释: 首先,HTML部分定义了页面的基本结构,包括一个`&lt;div id="nav"&gt;`...

    javascript实现简易的tab选项卡切换效果

    以上就是使用JavaScript实现简易选项卡切换效果的基本步骤。这个例子虽然简单,但足以满足大多数基本需求。通过进一步的定制,可以添加更多的动画效果、键盘导航支持等高级功能,以提高用户体验。在实际开发中,你还...

    Jquery -tab简易选项卡

    在网页设计中,选项卡(Tab)是一种常见的用户界面元素,它允许用户在多个相关但独立的内容区域之间切换,而无需加载新的页面。本资源"Jquery -tab简易选项卡"提供了一种简单的方法,利用JavaScript库jQuery实现这种...

    jquerytabSelect简易的tab选项卡组件

    &lt;ul class="tabs"&gt; &lt;li&gt;&lt;a href="#tab1"&gt;选项卡1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tab2"&gt;选项卡2&lt;/a&gt;&lt;/li&gt; 内容1 内容2 ``` 通过设置不同的选项,你可以自定义插件的行为。例如,你可以设置默认激活的选项卡,添加...

    简易CSS3 Tab菜单切换特效代码

    **简易CSS3 Tab菜单切换特效代码详解** 在网页设计中,Tab菜单是一种常见的导航元素,它可以帮助用户在多个内容区块间进行便捷切换。本篇将详细介绍如何利用CSS3实现一个简单的Tab菜单切换特效,该特效在切换时带有...

    简易tab效果

    在实际项目中,可能会引入前端框架如React、Vue或Angular来简化开发,并利用其内置的生命周期方法和状态管理来处理Tab的切换。同时,也可以考虑使用CSS预处理器(如Sass或Less)和模块化工具(如Webpack)来优化代码...

    js简易选项卡-简单易用

    JavaScript简易选项卡是一种常见的网页交互元素,用于展示多个相互替换的内容区域。在网页设计中,选项卡可以帮助组织信息,使得用户界面更加整洁、易于浏览。本文将深入探讨如何使用JavaScript实现一个简单易用的...

    material框架 TabLayout简易Demo

    TabLayout是其中的一个重要组件,它用于展示多个可切换的标签页,常与ViewPager结合使用,为用户提供平滑的浏览体验。在这个“material框架 TabLayout简易Demo”中,我们将探讨如何使用Java在Android Studio中实现一...

    小部件:一组基于jQuery && javascript的小部件。一套基于jquery或javascript的插件库:轮播,标签页,滚动条,拖曳框,布局,搜索提示,城市选择(城市三级联动),日历等

    web组件 项目演示(DEMO)地址: : 版权 本套组件由原创,请考虑原创,保留脚本标题版权。 召唤 ...简介:简易标签切换及淡入淡出幻灯片功能 $ ( selector ) . tabs ( options , callback ( api ) )

    Jquery制作的蓝色TAB菜单

    在这个脚本中,我们使用了jQuery的`.click()`方法来添加点击事件,`.addClass()`和`.removeClass()`来切换选中状态,以及`.show()`和`.hide()`来控制内容区域的可见性。 4. **完善功能**:为了让菜单更加用户友好,...

    Jquery 报表模板

    本篇文章将深入探讨如何使用jQuery来创建具有Tab样式、图片轮播效果的美观报表,并介绍其简易性和实用性。 ### Tab样式 Tab样式是报表设计中常见的一种布局方式,它将大量信息组织成多个分页,用户可以方便地切换...

    magento插件

    Magento EasyTabs(简易标签组件) - **描述**:为商品详情页添加标签导航功能,便于用户查看商品信息。 - **特点**: - 支持自定义标签内容。 - 界面简洁美观。 - 提升用户体验。 - **安装方式**:通过Magento...

    Google Chrome 6.0.451.0 Dev 版(一个由Google公司开发的网页浏览器)

    WebKit简易小巧,并能有效率的运用内存,符合Google理念,并且对新开发者来说相当容易上手。 [编辑本段]使用者界面  Gears  Chrome包含了Google Gears,研发者可利用这项功能制作网页应用程序(web applications...

Global site tag (gtag.js) - Google Analytics