`
charrys
  • 浏览: 36192 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类

js多个tab切换简单不需要在body内添加事件

    博客分类:
  • js
阅读更多

注意的是a的里面的rel属性window.onload事件!在一个页面可以添加多个这样的效果,只需要在 onload事件添加就可以了。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<mce:style><!--
 *{margin:0;padding:0;}
 .clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;} 
 *html .clearfix{height:1%;}
 *+html .clearfix{height:1%;}
 .clearfix{display:inline-block;}  
 .clearfix {display:block;} 
 ul{margin:10px 10px 0;}
 ul li{background:#ddd; list-style:none;padding-top:5px; vertical-align:bottom}
 ul li a{padding:5px 10px;margin-left:5px;text-decoration:none;font-size:12px;color:#000;float:left;}
 ul li .crent{background:#fff;color:#f60;}
 p{display:none;border:1px solid #ddd;border-top:none;margin:0 10px 10px;padding:5px;}
--></mce:style><style mce_bogus="1"> *{margin:0;padding:0;}
 .clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;} 
 *html .clearfix{height:1%;}
 *+html .clearfix{height:1%;}
 .clearfix{display:inline-block;}  
 .clearfix {display:block;} 
 ul{margin:10px 10px 0;}
 ul li{background:#ddd; list-style:none;padding-top:5px; vertical-align:bottom}
 ul li a{padding:5px 10px;margin-left:5px;text-decoration:none;font-size:12px;color:#000;float:left;}
 ul li .crent{background:#fff;color:#f60;}
 p{display:none;border:1px solid #ddd;border-top:none;margin:0 10px 10px;padding:5px;}</style>
<title>Example</title>
<mce:script type="text/javascript"><!--
function $(objID){    
    return "string" == typeof(objID) ? document.getElementById(objID) : objID;
    }
function addEvt(tab,ct){
    var ctab = $(tab).getElementsByTagName("a");
 var cdiv = $(ct).getElementsByTagName("p");
    for(var i = 0;i<ctab.length;i++)
    { 
        ctab[i].onclick =function std(){   
   for(var i = 0;i<ctab.length;i++){
    if(i!=parseInt(this.rel-1))
    {
     ctab[i].className="";
     cdiv[i].style.display="none";     
    }
   }
   ctab[parseInt(this.rel)-1].className="crent";
   cdiv[parseInt(this.rel)-1].style.display="block";
        }
    }
}
window.onload=function(){
addEvt("tab","ct");
addEvt("tab2","ct2");
}
// --></mce:script>
</head>
<body>
<div id="all1">
  <ul class="ul_bigspace" id="tab">
    <li class="clearfix"><a href="#" mce_href="#" class="crent" rel="1">平面设计</a><a href="#" mce_href="#" rel="2">包装设计</a><a href="#" mce_href="#" rel="3">影视广告片</a><a href="#" mce_href="#" rel="4">媒介资源</a><a href="#" mce_href="#" rel="5">网站设计</a><a href="#" mce_href="#" rel="6">网站设计</a></li>
  </ul>
  <div id="ct">
    <p style="display:block;" mce_style="display:block;">1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
  </div>
  <br>
  <ul class="ul_bigspace" id="tab2">
    <li class="clearfix"><a href="#" mce_href="#" class="crent" rel="1">平面设计</a><a href="#" mce_href="#" rel="2">包装设计</a><a href="#" mce_href="#" rel="3">影视广告片</a><a href="#" mce_href="#" rel="4">媒介资源</a><a href="#" mce_href="#" rel="5">网站设计</a><a href="#" mce_href="#" rel="6">网站设计</a></li>
  </ul>
  <div id="ct2">
    <p style="display:block;" mce_style="display:block;">1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
  </div>
</div>
</body>
</html>

 

可直接在http://www.ok22.org/art_detail.aspx?id=64 运行查看效果

分享到:
评论

相关推荐

    懒人原生js tab标签切换效果

    如果你的页面只有一个tab切换的地方需要调用js效果 单独为了它你还要为页面加载一个jQuery插件,想必是极痛苦的 所有很多时候,jQuery特效也不是万能的,偶尔来个原生的js效果也是必须的 今天无聊,...

    jQuery全屏TAB页面切换代码.zip

    在网页设计中,选项卡(Tab)布局是一种常见的信息展示方式,它可以有效地组织内容,使得用户能够通过简单的点击或滚动操作在多个页面之间切换。本示例中的jQuery全屏TAB页面切换代码,特别强调了鼠标滚动和点击导航...

    jQuery左侧点击tab切换代码.rar_Tabú_jQuery左侧点击tab切换代码_realo1r_tab 切换代码

    在本文中,我们将深入探讨如何实现一个基于jQuery的左侧点击tab切换效果,这通常用于创建交互式的网页界面。"jQuery左侧点击tab切换代码"是一种常见的前端开发技术,它允许用户通过点击页面左侧的选项卡来切换不同的...

    js+css实现tab菜单切换效果的方法.docx

    在网页设计中,Tab 菜单是一种常见的交互元素,用于组织和展示多个内容区域,让用户能够方便地在不同主题之间切换。本文将详细介绍如何使用 JavaScript 和 CSS 结合实现一个基本的 Tab 菜单切换效果。 首先,我们来...

    tab切换效果

    本文将详细介绍如何通过微信小程序的WXML、WXSS及JS来实现一个简单的Tab切换效果。 #### 二、技术原理 Tab切换效果主要依赖于状态管理和样式控制。当用户点击不同的标签时,程序会根据用户的操作更新数据模型中的...

    layui点击导航栏刷新tab页的示例代码

    Layui的tab组件是该框架中非常实用的一个组件,它允许开发者在页面上创建多个可切换的标签页。然而,Layui的tab组件默认情况下在切换标签页时并不会刷新内容,有时这种默认行为并不满足开发者的实际需求,比如在某些...

    jQuery左侧点击tab切换代码.zip

    1. **HTML结构**:在HTML中,通常会创建一个包含多个`&lt;li&gt;`元素的无序列表(`&lt;ul&gt;`),每个`&lt;li&gt;`元素代表一个tab选项。这些选项可能包含链接(`&lt;a&gt;`标签)或内联元素(如`&lt;span&gt;`),用于触发点击事件。 2. **CSS...

    i35tab选项卡切换jQuery插件

    在网页设计中,选项卡切换是一种常见的交互设计模式,用于在有限的空间内展示大量信息。`i35tab` 是一款基于 jQuery 的选项卡切换插件,它提供了丰富的功能和自定义选项,为网页增添动态且直观的用户体验。下面将...

    最简单的tab切换实例代码

    标题中的“最简单的tab切换实例代码”是指一种基础的网页交互设计,用于在多个内容区块之间切换显示。这种设计常见于导航菜单、设置面板等场景,用户点击不同的选项(tab),对应的内容区域会显示或隐藏,提供简洁的...

    js实现的tab标签切换效果代码分享

    【JavaScript Tab标签切换效果详解】 在网页设计中,Tab切换...这个简单的Tab切换效果适用于网页中的各种交互场景,比如展示不同类别的信息或设置多个配置选项。开发者可以根据实际需求进行自定义样式调整和功能扩展。

    js Tab选项卡特效

    本文将介绍一个基于纯 JavaScript 实现的 Tab 选项卡特效,通过简单的 CSS 样式和 JavaScript 逻辑,可以轻松实现动态切换内容的效果。 #### 二、核心功能与实现原理 本示例实现了以下功能: 1. **初始化**:自动...

    Python代码源码-实操案例-框架案例-如何实现Tab栏页面的无跳转切换.zip

    在Python编程领域,实现Tab栏页面的无跳转切换是一种常见的前端交互设计,它能够提供良好的用户体验,使得用户在不同的内容区域之间切换时无需等待页面重新加载。在本案例中,我们将探讨如何利用Python的Web框架,如...

    javascript仿126邮箱TAB切换效果

    在现代网页设计中,TAB切换是一种常见的交互方式,它可以有效地利用有限的空间展示更多的内容,并提高用户体验。本篇文章将详细解析一个仿126邮箱TAB切换效果的示例代码,通过分析其HTML结构、CSS样式以及JavaScript...

    vue滚动tab跟随切换效果

    在Vue.js中实现“滚动tab跟随切换效果”是一种常见的移动端交互设计,它可以提供更好的用户体验,让用户更容易地在多个内容区域之间导航。以下是如何利用Vue.js实现这个功能的详细步骤: 首先,我们需要创建一个Vue...

    JavaScript实现的简单Tab点击切换功能示例

    在网页设计中,Tab切换是一种常见的交互元素,用于组织和展示大量内容,使得用户能够方便地在多个子页面或信息块之间切换。本实例通过JavaScript实现了一个简单的Tab点击切换功能,帮助开发者理解如何利用JavaScript...

    jquery图片上下tab切换效果

    在本文档中,我们将探讨如何利用 jQuery 实现一个简单的图片上下Tab切换效果。这种效果通常用于展示产品特性或页面导航。 #### 三、HTML结构解析 在示例代码中,HTML 结构是通过一系列 `&lt;div&gt;`、`&lt;h3&gt;` 和 `&lt;p&gt;` ...

    MUI框架--页面init事件

    在MUI中,我们通常会在HTML文件的`&lt;body&gt;`标签内添加一个`mui-init`属性,将需要在`init`事件触发时执行的JavaScript代码写入其中。例如: ```html &lt;body mui-init="myInitFunction()"&gt; ``` 这里的`...

    [html5技术]基于bootstrap制作的多标签页(tabs)

    在实际项目中,可能需要根据需求进行自定义,例如通过JavaScript事件监听器来处理用户点击事件,或者根据页面宽度自动调整为垂直布局。了解这些基础知识后,你就可以灵活地使用Bootstrap创建适应各种屏幕尺寸的多...

    jQuery easyui后台管理页面tab布局样式代码

    Tab布局是jQuery EasyUI中的一个重要特性,它允许在一个页面上展示多个并行的内容区域,每个区域被一个标签页所代表,用户可以通过点击不同的标签来切换显示的内容。这种布局方式常用于后台管理系统,因为它可以有效...

    jQuery Tab标签插件

    jQuery Tab标签插件是一种常用的前端开发工具,它允许开发者轻松地在网页中实现美观且功能丰富的标签页切换效果。这个插件基于JavaScript库jQuery构建,它简化了HTML、CSS和JavaScript之间的交互,使得即便是初学者...

Global site tag (gtag.js) - Google Analytics