多标签页效果 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. Python语法注意点

    1. 在Python中定义函数,可以用必选参数.默认参数.可变参数.关键字参数和命名关键字参数,这5种参数都可以组合使用.但是请注意,参数定义的顺序必须是:必选参数.默认参数.可变参数.命名关键字参数 ...

  2. Asp.net core 学习笔记 (AutoMapper)

    参考 : http://www.cnblogs.com/xishuai/p/3700052.html http://www.cnblogs.com/xishuai/p/3704435.html htt ...

  3. gulp下单页面应用打包

    项目地址:https://pan.baidu.com/s/1cu4WW2 之前已经说过多入口打包,最近正好做一个单页面应用,之前多人口是用webpack打包的,但是感觉webpack比较重,单页面我又 ...

  4. laravel数据库迁移 和 路由防攻击

    命令:php  artisan  migrate 防攻击:

  5. dedecmsv5.7 前台模版里输出变量

    如何在PHP文件查询出来的数据赋值给前端页面展示出来? 例如: PHP文件:agency.php require_once(dirname(__FILE__) . '/../../include/co ...

  6. mysql索引 ->创建索引、修改索引、删除索引的命令语句

    查看表中已经存在 index:show index from table_name; 创建和删除索引索引的创建可以在CREATE TABLE语句中进行,也可以单独用CREATE INDEX或ALTER ...

  7. JavaScript 复杂判断的更优雅写法

    我们编写js代码时经常遇到复杂逻辑判断的情况,通常大家可以用if/else或者switch来实现多个条件判断,但这样会有个问题,随着逻辑复杂度的增加,代码中的if/else/switch会变得越来越臃 ...

  8. html5（七） Web存储

    http://www.cnblogs.com/stoneniqiu/p/4206796.html http://www.cnblogs.com/v10258/p/3700486.html html5中 ...

  9. Ansible 小手册系列 十四（条件判断和循环）

    条件判断 When 语句 在when 后面使用Jinja2 表达式,结果为True则执行任务. tasks: - name: "shut down Debian flavored syste ...

  10. 主机连接虚拟机redis 服务器

    1. centos 虚拟机安装redis sudo yum install epel-release sudo yum update sudo yum install redis sudo syste ...