多标签页效果 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. 在 jupyter 中添加菜单和自动完成功能

    在 jupyter 中添加菜单和自动完成功能 参考文档http://www.360doc.com/content/17/1103/14/1489589_700569828.shtmlhttp://to ...

  2. navicat 链接 mysql 报错1251

    使用版本: navicat for mysql 10.1.7版主 mysql-8.0.11-winx64 版本 报错原因:navicat版本太低(使用新版本navicat或者使用旧版本mysql) 解 ...

  3. [转]静态库、动态库,dll文件、lib文件,隐式链接、显式链接

    转自:https://blog.csdn.net/dcrmg/article/details/53427181 静态链接.动态链接 静态库和动态库分别应用在静态链接方式和动态链接方式中,所谓静态链接方 ...

  4. PHP7&Swoole源码安装

    PHP7源码安装 1.获取PHP http://php.net/downloads.php 2.解压 tar -xjvf php-7 (根据压缩包的格式修改命令 如果时间戳有问题 -m) 3. ./c ...

  5. 以太坊钱包开发系列2 - 账号Keystore文件导入导出

    以太坊去中心化网页钱包开发系列,将从零开始开发出一个可以实际使用的钱包,本系列文章是理论与实战相结合,一共有四篇:创建钱包账号.账号Keystore文件导入导出.展示钱包信息及发起签名交易.发送Tok ...

  6. 手机端页面可以左右轻微拖动的bug

    在做项目的时候,必须要适应各种屏幕,移动端是必须的. 但是在移动端中,网站是左右可以动,怎么办呢? 这是只要在样式表中写入 html,body{overfow-x:hidden;} bug产生在H5的 ...

  7. ZZW_shell脚本中的调用MYSQL传参及注意的问题

    [oracle@ip9140 db_pcc]$ cat zzw_cc.sh #!/bin/bash z_user='pcc_csuser22'z_pass='pcc_csuser22'z_db='db ...

  8. linux-Centos7安装python3并与python2共存

    1.查看是否已经安装Python CentOS 7.2 默认安装了python2.7.5 因为一些命令要用它比如yum 它使用的是python2.7.5. 使用 python -V 命令查看一下是否安 ...

  9. 使用MongoDB数据库(2)(三十六)

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

  10. 1-Angular学习篇

    Angular 官方学习网站:https://angular.io 1.安装node.js 在angular主页下载node.js安装包 2.创建angular工程 Windows系统在命令窗口输入: ...