<!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. 配置中心Apollo多环境部署

  2. codevs 1020 孪生蜘蛛 x

    题目描述 Description 在G城保卫战中,超级孪生蜘蛛Phantom001和Phantom002作为第三层防卫被派往守护内城南端一带极为隐秘的通道. 根据防护中心的消息,敌方已经有一只特种飞蛾 ...

  3. sh_10_嵌套打印小星星

    sh_10_嵌套打印小星星 # 需求 # # 在控制台连续输出五行 *,每一行星号的数量依次递增 # * # ** # *** # **** # ***** # 开发步骤 # # 1> 完成 5 ...

  4. Windows10 + VS2015 环境下对gdal2.0.1进行64bit编译小结

    这是官方给出的编译指导,但是在实践过程中有几点仍然需要特别注意. Tip 1:不要使用默认的"VS开发人员命令提示"工具,使用该工具会遭遇如下的错误: 正在创建库 gdal_i.l ...

  5. 超实用的PHP代码片段！

    摘要:本文分享了九个超级有用的PHP代码片段,当你在开发网站.应用或者博客时,利用这些代码能为你节省大量的时间.你可以直接拿来用! 此前,研发频道曾发布<直接拿来用,10个PHP代码片段> ...

  6. Oracle生成ASH报告

    1.ASH (Active SessionHistory) ASH以V$SESSION为基础,每秒采样一次,记录活动会话等待的事件.不活动的会话不会采样,采样工作由新引入的后台进程MMNL来完成. v ...

  7. 大哥带我们的mysql注入 基于时间的盲注

    ?id= and ,,sleep()) ?id= and ,,sleep()) if语句/if()函数 在基于时间型SQL盲注中,我们经常使用条件语句来判断我们的操作是否正确: ?id= and = ...

  8. 关于MySQL去除查询结果重复值

    下面先来看看例子: table:  id name  1 a  2 b  3 c  4 c  5 b 库结构大概这样,这只是一个简单的例子,实际情况会复杂得多. 比如我想用一条语句查询得到name不重 ...

  9. linux下面用Mingw编译libx264

    linux下面用Mingw编译libx264 首先要先安装好mingw 我用的是Ubuntu 编译ffmpeg的时候 ,官方上面有一个自动化脚本能够把mingw安装好 这里就不说了 新版本的libx2 ...

  10. 【c++进阶：c++ algorithm的常用函数】

    c++ algorithm的常用函数 https://blog.csdn.net/hy971216/article/details/80056933 reverse() reverse(it,it2) ...