<!DOCTYPE HTML>
<html>
<head>
    <title>:target切换</title>
    <meta charset="utf-8" />
    <style>
        *{margin:0;padding: 0;}
        #tab li{float: left;list-style: none;width: 80px;height: 40px;line-height: 40px;cursor: pointer;text-align: center;}
        #container{position: relative;}
        #content1,#content2,#content3{width: 300px;padding:30px;position: absolute;top: 40px;left: 0;}
        #tab1,#content1{background-color: #ffcc00;}
        #tab2,#content2{background-color: #ff00cc;}
        #tab3,#content3{background-color: #00ccff;}
        :target{z-index:1}
        #content1 {z-index:1}
    </style>
</head>
<body>
<h2>实现多标签页效果</h2>
<ul id="tab">
    <li id="tab1">
       <a href="#content1">10元套餐</a></li>
    <li id="tab2"
       ><a href="#content2">30元套餐</a></li>
    <li id="tab3"
       ><a href="#content3">50元包月</a></li>
</ul>
<div id="container">
    <div id="content1" class="fade show">
        10元套餐详情：<br />&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟
    </div>
    <div id="content2" class="fade">
        30元套餐详情：<br />&nbsp;每月套餐内拨打300分钟，超出部分1.5毛/分钟
    </div>
    <div id="content3" class="fade">
        50元包月详情：<br />&nbsp;每月无限量随心打
    </div>
</div>
</body>
</html>


												


											
：target方法实现切换的更多相关文章
	

    
								
  1. call()和apply()方法（切换上下文）
		
    call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. apply方法: 语法:apply ...
    
		
    2. 
						
  2. 【NX二次开发】切换模块的方法，切换到制图模块
		
    源码(NX12.0): Session theSession = NXOpen::Session::GetSession(); theSession->ApplicationSwitchImme ...
    
		
    3. 
						
  3. Spring3.3 整合 Hibernate3、MyBatis3.2 配置多数据源/动态切换数据源 方法
		
    一.开篇 这里整合分别采用了Hibernate和MyBatis两大持久层框架,Hibernate主要完成增删改功能和一些单一的对象查询功能,MyBatis主要负责查询功能.所以在出来数据库方言的时候基 ...
    
		
    4. 
						
  4. jquery mobile切换页面的几种方法
		
    jquery mobile切换页面的几种方法 - 不厚道青蛙之焦油潭 - 博客频道 - CSDN.NET jquery mobile切换页面的几种方法 分类: phonegap html5 2012- ...
    
		
    5. 
						
  5. ubuntu中切换到root账号方法
		
    ubuntu如何切换到root用户身份? 前面小编分享了ubuntu怎么开启root用户,下面小编来分享如何切到到root用户 方法/步骤 按照下面的方式打开终端工具,或者使用终端工具的快捷键Ctrl ...
    
		
    6. 
						
  6. Fragment与Fragment相互切换之间的生命周期方法
		
    Fragment 1 切换到 Fragment 2时生命周期变化 1.通过 add hide show 方式来切换 Fragment Fragment1 的生命周期变化为:onCreate().onC ...
    
		
    7. 
						
  7. iOS:切换视图时,反向传递数据方法二：代理
		
    代理: 1.发送信息的控制器设置一个代理,并自定义一个代理的方法,用来传递数据 2.接受信息的控制器遵循发送信息的控制器的协议 3.接受信息的控制器设置发送信息的控制器的代理为自己self 4.接受信 ...
    
		
    8. 
						
  8. Spring3.3 整合 Hibernate3、MyBatis3.2 配置多数据源/动态切换数据源方法
		
    一.开篇 这里整合分别采用了Hibernate和MyBatis两大持久层框架,Hibernate主要完成增删改功能和一些单一的对象查询功能,MyBatis主要负责查询功能.所以在出来数据库方言的时候基 ...
    
		
    9. 
						
  9. jquery swiper3自定义切换效果的方法
		
    jquery swiper3自定义切换效果的方法 <pre> <div class="swiper-slide"> <div class=" ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. jpa 原生查询createNativeQuery里面有冒号保留字关键字的问题
			
    用\\:替换. 比如: String sql = "select location.ToString() a,version,location.STDistance(geometry\\:\ ...
    
			
    2. 
						
  2. 有趣的js获取input标签中光标的索引
			
    先看动图如下,我们就可以很清楚的知道获取input标签中光标的索引的意思了. 由于IE支持document.selection,Firefox,Chrome,Safari以及Opera都有select ...
    
			
    3. 
						
  3. pyinstall实现不显示控制窗口
			
    做图形界面的时候,总会弹出一个cmd的黑框框,为了美观,通常希望将其隐藏. 查找资料得知:1.pythonw.exe .py不会出现(此方法没试过) 2.python.exe .pyw即将py文件的后 ...
    
			
    4. 
						
  4. 【清北学堂2018-刷题冲刺】Contest 2
			
     这场比赛的T1相当智熄.由于至今无法理解题意,我只能解出前20分.诸位dalao谁能比较好地理解题意(独立性)的,请联系我,不胜感激.  在此本蒟蒻只能贴上题面: Task 1:选举 [问题描述]  ...
    
			
    5. 
						
  5. JVM高手之路七（tomcat调优以及tomcat7、8性能对比）
			
         版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/lirenzuo/article/details/77164033 因为每个链路都会对其性能 ...
    
			
    6. 
						
  6. CodeForces165E 位运算 贪心 + 状压dp
			
    http://codeforces.com/problemset/problem/165/E 题意 两个整数 x 和 y 是 兼容的,如果它们的位运算 "AND" 结果等于 0,亦 ...
    
			
    7. 
						
  7. #1479 : 三等分（树形DP)
			
    http://hihocoder.com/problemset/problem/1479 #1479 : 三等分 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi最 ...
    
			
    8. 
						
  8. 剑指Offer_编程题_13
			
    题目描述 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变. class So ...
    
			
    9. 
						
  9. docker 私有仓库之Harbor搭建与使用
			
    Harbor搭建 下载Harbor: http://harbor.orientsoft.cn/ #下载offline版本 配置Harbor tar xvf harbor-online-installe ...
    
			
    10. 
						
  10. 《Apache Kafka实战》读书笔记-调优Kafka集群
			
    <Apache Kafka实战>读书笔记-调优Kafka集群 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.确定调优目标 1>.常见的非功能性要求 一.性能( ...
    
			
    11.