多标签页效果 tab切换

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        .tab{

            float:left;

            width:150px;

            height:60px;

            border:1px solid #ddd;

            border-bottom:none;

            text-align:center;

            line-height:60px;

            cursor:pointer;

        }

        #tab0,#page0{

            background:#faa;

        }

        #tab1,#page1{

            background:#afa;

        }

        #tab2,#page2{

            background:#aaf;

        }

        .pageContainer{

            position:relative;

            clear:both

        }

        .pageContainer div{

            position:absolute;

            width:500px;

            height:100px;

            border:1px solid #ddd;

            border-top:none

        }

        .topPage{

            z-index:1

        }

    </style>

</head>

<body>

    <h2>多标签页效果</h2>

    <div id="tab0" class="tab" onclick="showPage(0)">10元套餐</div>

    <div id="tab1" class="tab" onclick="showPage(1)">50元套餐</div>

    <div id="tab2" class="tab" onclick="showPage(2)">100元套餐</div>

    <div id="pageContainer" class="pageContainer">

        <div id="page0" class="topPage">10元套餐详情</div>

        <div id="page1">50元套餐详情</div>

        <div id="page2">100元套餐详情</div>

    </div>

    <script type="text/javascript">

        function showPage(num){

            //把其他标签页的class改为page

            var container = document.getElementById('pageContainer');

            var divList = container.getElementsByTagName("div");

            for(var i=0; i<divList.length; i++){

                if(i!=num){

                    var div=divList[i];

                    div.removeAttribute("class");

                }

            }

            //把待显示的标签页的class改为page topPage

            var pageDiv = document.getElementById("page"+num);

            var classNode=document.createAttribute('class');

            classNode.value="topPage"

            pageDiv.setAttributeNode(classNode);

        }

    </script>

</body>

</html>

JS效果的更多相关文章

  1. 类js效果

    类似js效果,点击看看  代码 onclick="return confirm('您确定要看看吗?')" 放入a标签里面

  2. m.jd.com首页中的js效果

    m.jd.com中的部分js效果 昨天把m.jd.com的首页布局写好了,今天写一下首页中部分js效果.头部背景色透明度的改变,焦点图轮播,京东快报的小轮播,以及秒杀倒计时.这里html,css样式就 ...

  3. Tab选项卡切换卡JS效果

    <script type="text/javascript"> /* tab切换选项卡js效果 writed by *** 2010.08.13 1.currentid ...

  4. JS效果的步骤

    一.写JS效果的步骤 1.先实现布局 (XHTML+CSS2) 2.实现原理 (1)希望把某个元素移除你的视线: a.  display:none;         显示为无,不占据空间 b.  vi ...

  5. Github上html页面(包括CSS样式和JS效果)如何显示出来

    在看Github上项目时,发现有的html页面效果能很好的展现出来,而有的则不能.对这个问题很好奇,因此研究了一下,最终做到了将页面展示出来的目的.下面以我的Github的开源项目bootstrap- ...

  6. WebView 实现JS效果和a标签的点击事件

    目前很多android app都可以显示web页面的界面,嵌入式开发,这个界面一般都是WebView这个控件加载出来的,学习该控件可以为你的app开发提升扩展性. 先说下WebView的一些优点: 可 ...

  7. js效果-多选只能选两项,如果超出自动取消第一次选的

    这个效果很有意思,个人觉得难点在于点击选中状态的多选的数组操作,以下是代码,感谢落梨 <!DOCTYPE> <html> <head> <title> ...

  8. 常用JS效果 需要时更新。。。

    1.手风琴效果 JS: $(function() {     var aMenuOneLi = $(".menu-one > li");     var aMenuTwo = ...

  9. 用js效果做的简单焦点图

    /*js代码*/ <script src="js/js/myfocus-2.0.1.min.js" type="text/javascript">& ...

  10. 一个不陌生的JS效果-marquee,用css3来实现

    关于marquee,就不多说了,可以戳这里. 毕竟他是一个很古老的元素,现在的标准里头也不推荐使用这个标签了.但平时一些项目中会经常碰到这样的效果,每次都是重新写一遍,麻烦! JS类实现marquee ...

随机推荐

  1. Learning-Python【27】：异常处理

    一.错误与异常 程序中难免会出现错误,而错误分为两种 1.语法错误:这种错误,根本过不了 Python 解释器的语法检测,必须在程序执行前就改正 2.逻辑错误:比如用户输入的不合适等一系列错误 那什么 ...

  2. 《温故而知新》JAVA基础八

    集合接口与泛型 定义: 集合接口会操作一系列相同属性数据的对象类型的数据结构,类似于数组,但是相对于数组来说更显得高端大气 集合的接口分为Collention和Map两大类,不直接操作,而是通过子类的 ...

  3. Windows下安装python的scipy等科学计算包（转）

    如果要使用python进行科学计算.数据分析等,一定要安装scipy.seaborn.numpy等等包. 但Windows下安装python的第三方库经常会出现问题.此前,已介绍过Windows下如何 ...

  4. 完整的Django入门指南学习笔记5

    前言 欢迎来到本系列教程的第5部分,在这节课,我们将学习如何保护视图防止未登录的用户访问,以及在视图和表单中访问已经登录的用户,我们还将实现主题列表和回复列表视图,最后,将探索Django ORM的一 ...

  5. redis的数据类型及使用

    Redis 数据类型 Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set(集合)及zset(sorted set:有序集合). String(字符串) st ...

  6. django中form组件

    Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否 ...

  7. MAC 下 Excel打开UTF-8格式的文件乱码

    为了识别 Unicode 文件,Microsoft 建议所有的 Unicode 文件应该以 ZERO WIDTH NOBREAK SPACE字符开头.这作为一个”特征符”或”字节顺序标记(byte-o ...

  8. 使用MongoDB数据库（2）（三十六）

    快速开始使用Spring-data-mongodb 若MongoDB的安装配置采用默认端口,那么在自动配置的情况下,我们不需要做任何参数配置,就能马上连接上本地的MongoDB.下面直接使用sprin ...

  9. LimeSDR环境安装与测试

    虚拟机:ubuntu虚拟机建议4g内存,64g硬盘,usb3.0已开启 //否则编译过程耗尽内存 1 换阿里云源(加速)# deb cdrom:[Ubuntu 16.04 LTS _Xenial Xe ...

  10. 基于 HTML5 的工业组态高炉炼铁 3D 大屏可视化

    前言 在大数据盛行的现在,大屏数据可视化也已经成为了一个热门的话题.大屏可视化可以运用在众多领域中,比如工业互联网.医疗.交通.工业控制等等.将各项重要指标数据以图表.各种图形等形式表现在一个页面上, ...