JS效果
多标签页效果 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效果的更多相关文章
- 类js效果
类似js效果,点击看看 代码 onclick="return confirm('您确定要看看吗?')" 放入a标签里面
- m.jd.com首页中的js效果
m.jd.com中的部分js效果 昨天把m.jd.com的首页布局写好了,今天写一下首页中部分js效果.头部背景色透明度的改变,焦点图轮播,京东快报的小轮播,以及秒杀倒计时.这里html,css样式就 ...
- Tab选项卡切换卡JS效果
<script type="text/javascript"> /* tab切换选项卡js效果 writed by *** 2010.08.13 1.currentid ...
- JS效果的步骤
一.写JS效果的步骤 1.先实现布局 (XHTML+CSS2) 2.实现原理 (1)希望把某个元素移除你的视线: a. display:none; 显示为无,不占据空间 b. vi ...
- Github上html页面(包括CSS样式和JS效果)如何显示出来
在看Github上项目时,发现有的html页面效果能很好的展现出来,而有的则不能.对这个问题很好奇,因此研究了一下,最终做到了将页面展示出来的目的.下面以我的Github的开源项目bootstrap- ...
- WebView 实现JS效果和a标签的点击事件
目前很多android app都可以显示web页面的界面,嵌入式开发,这个界面一般都是WebView这个控件加载出来的,学习该控件可以为你的app开发提升扩展性. 先说下WebView的一些优点: 可 ...
- js效果-多选只能选两项,如果超出自动取消第一次选的
这个效果很有意思,个人觉得难点在于点击选中状态的多选的数组操作,以下是代码,感谢落梨 <!DOCTYPE> <html> <head> <title> ...
- 常用JS效果 需要时更新。。。
1.手风琴效果 JS: $(function() { var aMenuOneLi = $(".menu-one > li"); var aMenuTwo = ...
- 用js效果做的简单焦点图
/*js代码*/ <script src="js/js/myfocus-2.0.1.min.js" type="text/javascript">& ...
- 一个不陌生的JS效果-marquee,用css3来实现
关于marquee,就不多说了,可以戳这里. 毕竟他是一个很古老的元素,现在的标准里头也不推荐使用这个标签了.但平时一些项目中会经常碰到这样的效果,每次都是重新写一遍,麻烦! JS类实现marquee ...
随机推荐
- MSSQL 数据库 buildindex 出错
错误1: Executing the query "ALTER INDEX [IX_liveConfigState_Service_ServiceId_..." failed wi ...
- Pandas 基础(10) - 用 Pivot table 做格式转换
Pivot allows you to transform or reshape data.Pivot 可以帮助我们改变数据的格式, 下面两个例子可以作为参考: 下面来看下具体实现, 首先引入一个 c ...
- JxBrowser之一:Java嵌入Chrome浏览器
1.JxBrowser是一个让Java可以轻松集成Chrome浏览器的跨平台库:一般用于网络爬虫或者网页自动化测试等. 官方网址:https://jxbrowser.support.teamdev.c ...
- [数据结构]P1.3 栈 Stack
* 注: 本文/本系列谢绝转载,如有转载,本人有权利追究相应责任. 栈是一种先进后出的结构(FILO),常见的操作有:push 入栈.pop删除栈顶元素并返回.peek 查看栈顶元素 与其他线性结构一 ...
- ubuntu1404安装搜狗输入法
1.安装fcitx,一种输入法框架 apt-get install fcitx 2.配置使用fcitx 配置中心-语言支持-键盘输入方式系统,选择fcitx 3.登出再登入 4.下载sougou安装d ...
- HTML辅助方法
顾名思义,HTML辅助方法(HTML Helper)就是用来辅助产生HTML之用,在开发View的时候一定会面对许多HTML标签,处理这些HTML的工作非常繁琐,为了降低View的复杂度,可以使用HT ...
- 另一道不知道哪里来的FFT题
给定一个序列,求出这个序列的k阶前缀和,模998244353,n<=1e5. k阶前缀和可以看成一个一个n*k的平面上的二维行走问题. 第i项对第j项的贡献是从(i,0)走到(j,k)的NE L ...
- java接口入参模板化,适用于企业化服务远程调度模板化的场景,接口入参实现高度可配置化
需求:远程服务接口模板化配置提供接入服务 模板接口分为三个模块:功能路由.参数校验.模板入库 路由:这里的实现方式很简单,就是根据业务标识找到对应的处理方法 参数校验: 参数校验这步涉及模板和校验类两 ...
- Python3+PyCharm+Django+Django REST framework开发教程
一.说明 自己一是想跟上潮流二是习惯于直接干三是没有人可以请教,由于这三点经常搞得要死要活.之前只简单看过没写过Diango,没看过Django REST framework,今天一步到位直接上又撞上 ...
- H264视频压缩算法
H264视频压缩算法现在无疑是所有视频压缩技术中使用最广泛,最流行的.随着 x264/openh264以及ffmpeg等开源库的推出, 大多数使用者无需再对H264的细节做过多的研究,这大降低了人们使 ...