<!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. msyql 优化之五不要

    1.尽量不要有空判断的语句,因为空判断将导致全表扫描,而不是索引扫描. 对于空判断这种情况,可以考虑对这个列创建数据库默认值 //空判断将导致全表扫描 select small_id from sma ...

  2. [CSP-S模拟测试]:括号密码（贪心）

    题目描述 在“无限神机”的核心上,有一个奇怪的括号密码,密码初始已经有一个括号序列,有$n$个限制条件,每个限制条件描述为$l_i$和$r_i$,表示区间$[l_i,r_i]$的括号序列必须合法.调整 ...

  3. 一款基于CSS3漂亮的按钮

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  4. nodejs 简单的搭建一个服务器

    前言: nodejs 主要是后台语言  node 是在终端运行的,所以他可以进行 dos 命令 模块 自定义 JavaScript 是前台语言 nodejs 是 也是使用我们的 JavaScript ...

  5. SAAS方法论

    内容来源:https://12factor.net/ 如今,软件通常会作为一种服务来交付,它们被称为网络应用程序,或软件即服务(SaaS).12-Factor 为构建如下的 SaaS 应用提供了方法论 ...

  6. 阶段3 1.Mybatis_06.使用Mybatis完成DAO层的开发_2 Mybatis中编写dao实现类的使用-保存操作

    再完善.saveUser的方法 测试保存的操作 报错了 SqlSession的insert的源码 我们在执行Insert的时候,并没有把user对象传过去 usersex改成sex 再次测试

  7. robotframework之使用cookies登陆

    有的系统是使用cookies保持登陆的,而RF的Request库里面没有像Selenium2Library里面一样操作cookies的关键字,若接口需要登录则只能用UI自动化先登录,然后再将cooki ...

  8. 使用Postman对HTTP接口进行功能测试

    一.工具说明 Postman是一种网页调试与发送网页http请求的工具.我们可以用来很方便的模拟get或者post或者其他方式的请求来调试接口. 二.应用场景 1.Get请求 get请求通过接口参数拼 ...

  9. ReportManager

    package com.neusoft.report.engine; import com.neusoft.report.common.Logger; import com.neusoft.repor ...

  10. CSS3——表单 计数器 网页布局 应用实例

    CSS应用实例 表单 实例 输入框样式 输入框填充-----内边距 输入框------边框 输入框-----颜色 输入框-----聚焦 输入框-------图标 输入框------动画 [自动右滑] ...