<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>js实现tab标签切换效果- 站长素材</title>

<style>

*{ margin:0; padding:0; list-style:none;}

body{ font-size:12px;}

#my_col_guan{width:360px; overflow:hidden;}

#my_col_guan #my_menus {display:block;width:100%;padding:0;margin:0;list-style:none;}

#my_col_guan #my_menus li {float:left;width:120px;}

#my_col_guan #my_menus li a {display:block;line-height:27px;text-decoration:none;padding:0 0 0 5px; text-align:center; color:#333;}

#my_menu_con{ width:358px; height:135px; border-top:none}

.tag{ padding:10px; overflow:hidden;}

.col_guan_selected{background:#C5A069; color:#fff;}

</style>

</head>

<body>

<!--代码部分begin-->

<div id="my_col_guan">

<!--tag标题-->

    <ul id="my_menus">

        <li><a href="#" class="col_guan_selected">jQuery特效</a></li>

        <li><a href="#" class="">tab切换</a></li>

        <li><a href="#" class="">菜单导航</a></li>

    </ul>

<!--二级菜单-->

    <div id="my_menu_con">

        <div class="tag" style="display:block">

            这里是jQuery特效内容列表

         </div>

        <div class="tag" style="display:none">

            这里是tab切换效果

         </div>

        <div class="tag"  style="display:none">

            这里是菜单导航效果

        </div>

</div>

</div>

<script>

var tabs=function(){

    function tag(name,elem){

        return (elem||document).getElementsByTagName(name);

    }

    //获得相应ID的元素

    function id(name){

        return document.getElementById(name);

    }

    function first(elem){

        elem=elem.firstChild;

        return elem&&elem.nodeType==1? elem:next(elem);

    }

    function next(elem){

        do{

            elem=elem.nextSibling;

        }while(

            elem&&elem.nodeType!=1

        )

        return elem;

    }

    return {

        set:function(elemId,tabId){

            var elem=tag("li",id(elemId));

            var tabs=tag("div",id(tabId));

            var listNum=elem.length;

            var tabNum=tabs.length;

            for(var i=0;i<listNum;i++){

                    elem[i].onclick=(function(i){

                        return function(){

                            for(var j=0;j<tabNum;j++){

                                if(i==j){

                                    tabs[j].style.display="block";

                                    //alert(elem[j].firstChild);

                                    elem[j].firstChild.className="col_guan_selected";

                                }

                                else{

                                    tabs[j].style.display="none";

                                    elem[j].firstChild.className="";

                                }

                            }

                        }

                    })(i)

            }

        }

    }

}();

tabs.set("my_menus","my_menu_con");//执行

</script>

<!--代码部分end-->

</body>

</html>

效果图：

又一Tab切换效果（js实现）的更多相关文章

  1. Vue.js实现tab切换效果

    利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了vue后,开始要写出一些简单的特效. 1.2 实现思 ...

  2. jquery另外一种类似tab切换效果

    简要:最近做项目一些效果不能用淘宝kissy框架 所以代码得自己写啊 网上当然有很多组件 但是用他们的代码很多(有的是我不需要的代码) 且还要看API 还不如自己动手写个简单一个,是这么一种简单的效果 ...

  3. tab切换效果 网站中的图片自动切换

    网站中的图片自动切换 今天上一套tab切换效果的代码 动图就自己实现吧! 下面贴HTML代码,大体分两部分,图片div和按钮div,代码很容易看懂~ <!DOCTYPE html> < ...

  4. JS---案例：tab切换效果

    案例:tab切换效果 获取所有的li标签 第一件事:把这个a所在的所以兄弟元素的类样式全部移除 (removeAttributes) 第二件事:当前点击的a父级元素li (点击这个a所在的所在元素li ...

  5. CSS3 :target伪类实现Tab切换效果

    用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...

  6. 实用CSS3属性之 :target伪类实现Tab切换效果

    CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支 ...

  7. jquery写的tab切换效果 非常简单

    自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12p ...

  8. CSS3 :target伪类实现Tab切换效果 BY commy

    http://www.shejidaren.com/examples/css3-target/css3-target.html#tab1 标签一 标签二 标签三 欢迎加设计达人Q群:50063010设 ...

  9. vue2.0使用动态组件实现tab切换效果（vue-cli）

    <template> <div> <div>#动态组件实现tab切换效果#</div><br><br><br> &l ...

随机推荐

  1. BZOJ 4488: [Jsoi2015]最大公约数 暴力 + gcd

    Description 给定一个长度为 N 的正整数序列Ai对于其任意一个连续的子序列 {Al,Al+1...Ar},我们定义其权值W(L,R )为其长度与序列中所有元素的最大公约数的乘积,即W(L, ...

  2. No 'Configuration' method was found in class 'WebApp.Startup

    The following errors occurred while attempting to load the app.- No 'Configuration' method was found ...

  3. 新年第一发--HDU1848--Fibonacci again and again（SG函数）

    Problem Description 任何一个大学生对菲波那契数列(Fibonacci numbers)应该都不会陌生,它是这样定义的:F(1)=1;F(2)=2;F(n)=F(n-1)+F(n-2 ...

  4. java复制项目中的补丁，完整的包路径

    package com.bytter.audit.iface.util; import java.io.BufferedInputStream; import java.io.BufferedOutp ...

  5. 使用NSIS脚本制作一个安装包

    大部分人第一次看到NSIS脚本都是一脸懵逼的.因为它这个脚本的结构乍一看上去就非常奇怪,不作说明的话是看不懂的. 编写脚本命令的时候要非常注意,命令要按照规定写在脚本中不同的段落里,也就是说,命令的先 ...

  6. MS入门学习笔记

    1.建立晶体:选择晶系,添加原子:2.导入系统晶体文件:3.建立分子molecule,画原子:4.计算简单分子molecule:注意事项: 1)做了一个H2O分子,接下来要做一个“立体壳子”,因为CA ...

  7. 将ubuntu系统录到u盘上

    可以使用bootice工具对u盘分区,并隐藏,然后把系统录到隐藏分区,ubuntu只需要1.5G即可.bootice很强大 录制工具可选的有Universal USB Install.UltraISO ...

  8. SpringIOC容器创建过程

    在测试时,经常使用这种方式来创建spring容器 //创建基于注解的springIOC容器 ApplicationContext applicationContext = new Annotation ...

  9. 中国MOOC_零基础学Java语言_第7周 函数_2完数

    2 完数(5分) 题目内容: 一个正整数的因子是所有可以整除它的正整数.而一个数如果恰好等于除它本身外的因子之和,这个数就称为完数.例如6=1+2+3(6的因子是1,2,3). 现在,你要写一个程序, ...

  10. Zabbix4.0.1使用自带模板监控Linux主机 CPU、内存、硬盘、网卡

    环境: 前提已经安装好zabbix服务端.zabbix客户端, zabbix_server端ip和主机名信息:    ip:192.168.1.204 hostname:  www.test.com ...