<!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. html body标签 语法

    html body标签 语法 标签body是什么意思? 标签body是一个网页的身体部分,也就是用于定义网页的主体内容,也是一个HTML文档中必须的部分. 作用:定义文档的主体. 广州大理石机械构件 ...

  2. FJOI2017 day2游记

    day0 早上复习了一下凸包,lct的板子,发现现在的我好菜鸡啊,做题基本上还得看题解,自己不是很能分析出来. 下午去看考场,在附中机房又写了一遍lct,然后a掉了文理分科完就回去了. 回家的路上走在 ...

  3. EMC存储同时分配空间到两台LINUX服务器路径不一致导致双机盘符大小不一致

    操作系统:Centos linux6.6 当我们从EMC存储上划分空间同时分配给两台或者多台服务器上时,有的时候会出现在服务器上所生成的磁盘路径是不一致的,这样就会导致盘符名称不一致或者是盘符对应的大 ...

  4. Jmeter -- 上下文关联（JSON提取器）

    目标: 将请求A响应数据的部分内容提取出来,保存成变量供后续请求使用(用在返回格式为json的HTTP请求中) 步骤: 1. 添加JSON Extractor后置处理器 add --> post ...

  5. nodejs 文件操作

    前言: nodejs 自带的文件操作的模块  fs 就是对文件的增删查改: 就像我们用的服务器,我们没有办法在运行的文件上进行一直的修改,因为他不向浏览器,刷新后我们的文件会自己修改: 如果想要更改我 ...

  6. zabbix 监控hp 打印机

    https://share.zabbix.com/search?searchword=hp+printer&search_cat=1

  7. 一、基础篇--1.1Java基础-反射的用途和实现

    https://blog.csdn.net/SongYuxinIT/article/details/81872066 反射的核心是JVM在运行时才动态加载类或调用方法/访问属性,它不需要事先(写代码的 ...

  8. 使用discriminator实现鉴别器

    1在人员接口实现方法 public Employee getEmpByIdStep(Integer id); 2在映射文件进行配置 <!-- public Employee getEmpById ...

  9. VC CString,int,string,char*之间的转换

    CString转string : CString strMfc = "test"; std::string strStr; strStr = strMfc.GetBuffer(); ...

  10. 使用 go protoc --go_out 输出的 *.pb.go文件时报 undefined: proto.ProtoPackageIsVersion3

    事情是这样的:我参考go的 grpc 实现 https://grpc.io/docs/quickstart/go/ Download the example The grpc code that wa ...