<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

        *{margin:0px;padding:0px;}

        body{font-size:12px;}

        .box{margin:10px;padding:10px;}

        .box h3{margin:10px 0px;border-bottom:1px solid red;padding-bottom:10px;}

        .box p{line-height:20px;}

        .tabbox{margin:10px;}

        .tabbox .tabhead{float:left;list-style:none;margin-right:-1px;}

        .tabbox .tabhead li{width:80px;height:30px;cursor:pointer;line-height:30px;padding:0px 5px;border:1px solid #aaccff;margin-bottom:-1px;border-right:0px;}

        .tabbox .tabhead li.selected{background-color:#aaccff;color:White;font-weight:bold;}

        .tabbox .tabcontent{float:left;border:1px solid #aaccff;padding:10px;min-height:200px;width:600px;background-color:#aaccff;}

        .tabbox .tabcontent div{display:none;line-height:20px;}

        .tabbox .tabcontent div.selected{display:block;}

    </style>

     <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>

     <script type="text/javascript">

         $(function(){

            $(".tabhead li").click(function(){

               $(".tabhead li").siblings().removeClass("selected")

               $(this).addClass("selected")

               var a = $(this).index()

               //alert(a)

               $(".tabcontent div").eq(a).siblings().removeClass("selected")

               $(".tabcontent div").eq(a).addClass("selected")

            })

         })

     </script>

</head>

<body>

    <div class="box">

        <h3>试题要求</h3>

        <p>

            .完成选项卡切换功能，其中html和css已经给出，只需写出相应的js代码即可

        </p>

    </div>

    <div class="tabbox">

        <ul class="tabhead">

            <li class="selected">选项卡一</li>

            <li>选项卡二</li>

            <li>选项卡三</li>

            <li>选项卡四</li>

        </ul>

        <div class="tabcontent">

            <div class="selected">内容一</div>

            <div>内容二</div>

            <div>内容三</div>

            <div>内容四</div>

        </div>

    </div>

</body>

</html>



												


											
【jQuery03】简单的选项卡切换的更多相关文章
	

    
								
  1. 三行Jquery代码实现简单的选项卡
		
    今晚,我们来用实现一个简单的选项卡切换代码,主要代码只有两行. 效果: 思路:通过切换JQuery控制div的显隐和样式的改变 其中那个一个div显示,其余全隐藏 实现: <!DOCTYPE h ...
    
		
    2. 
						
  2. jquery 选项卡切换、选项卡封装、简单的jquery选项卡封装、tab切换效果
		
    相信选项卡切换是大家常用的效果单独写一个选项卡切换很方便但是要是一个页面出现多个选项卡不做封装的话会显得代码很杂乱 <div class="bodyCenter"> & ...
    
		
    3. 
						
  3. jQuery实现TAB选项卡切换特效简单演示
		
    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...
    
		
    4. 
						
  4. js和jquery实现简单的选项卡
		
    选项卡切换在做网页的时候经常会用到,以往都是用JQ来实现,代码简单易懂,今天用原生的js实现了一下,二者还是有很大不同的,可以对比一下代码来研究一下. <!DOCTYPE html> &l ...
    
		
    5. 
						
  5. 使用ViewPager+Fragment实现选项卡切换效果
		
    实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...
    
		
    6. 
						
  6. 常用js效果：选项卡切换
		
    js选项卡,很多网站都会用到,我这里用jquery给整了一个简单但是却很实用的js选项卡,废话不多说,直接上代码: <style> .txtadsblk01{ width:200px;}  ...
    
		
    7. 
						
  7. react tab选项卡切换
		
    Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...
    
		
    8. 
						
  8. MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换
		
      概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...
    
		
    9. 
						
  9. vue实现一个简单的选项卡
		
    用vue来实现一个小的选项卡切换,比之前要简单.方便很多. <!DOCTYPE html> <html lang="en"> <head> &l ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. CorelDRAW X6冰点价加推800套燃爆6月
			
    CorelDRAW是迄今最具创意的图形设计程序,并获得所有行业的公认的知名工具.在刚刚结束的CorelDRAW X6限量活动之后,CorelDRAW官方继续加推800套CorelDRAW X6满足用户 ...
    
			
    2. 
						
  2. Tensorflow学习笔记----基础（3）
			
    目录: 一.TensorFlow的系统架构 二.TensorFlow的设计理念 三.TensorFlow的运行流程 四.TensorFlow的编程模型:边.节点.图.设备.变量.变量初始化.内核 五. ...
    
			
    3. 
						
  3. vue调试工具vue-devtools的安装
			
    一.可以在chrome商店中下载安装,当然需要FQ哈,你懂得~: 二.手动安装: 1.将github上项目文件克隆到本地,https://github.com/vuejs/vue-devtools:  ...
    
			
    4. 
						
  4. HDU 5762 Teacher Bo （ 暴力 ）
			
    链接:传送门 题意:给出N个点( Xi , Yi ),和点的最远位置M,询问是否有这样的四个点 (A,B,C,D)(A<B,C<D,A≠CorB≠D) ,AB的曼哈顿路径长度等于CD的曼哈 ...
    
			
    5. 
						
  5. [BZOJ1322]Destroying The Graph
			
    题目大意:有一张有向图,对于每个点,有两种操作:1. 删掉它的所有入边2. 删掉它的所有出边对每个点的每个操作均有不同的价值.求使得图上没有边的最小价值.解题思路:考虑把点拆成入点和出点,然后就是二分 ...
    
			
    6. 
						
  6. NOI 2018 你的名字 (后缀自动机+线段树合并)
			
    题目大意:略 令$ION2017=S,ION2018=T$ 对$S$建$SAM$,每次都把$T$放进去跑,求出结尾是i的前缀串,能匹配上$S$的最长后缀长度为$f_{i}$ 由于$T$必须在$[l,r ...
    
			
    7. 
						
  7. 【技术翻译】SIFT算子原理及其实现 （一）介绍
			
    介绍 匹配不同图片的特征是计算机视觉常见的问题. 当所有要匹配的图片很相似的时候(大小,方位),简单的角点检测算子就可以匹配,但是,当你的图片大小,方位不同的时候,你就要用到尺度不变特征变换(scal ...
    
			
    8. 
						
  8. STM32 GPIO重映射（转）
			
    重映射就是将引脚功能重新定义到其他引脚, 例如PA9是USART1-TX默认的 管脚,但是现在PA9用做它用了,那可以将USART1-TX重新映射到PB6,当然这 种映射不是随意的想映射到哪个脚就哪个 ...
    
			
    9. 
						
  9. Bate版总结会议2
			
    本次会议主要是针对我们在冲刺阶段出现的问题进行的讨论.再有就是以后在开发中应该改进的地方. 问题一: 工作任务不能拖:因为任务一拖就很可能无法再规定的时间内完成,如果我们可以分配好任务就去做的话,我们 ...
    
			
    10. 
						
  10. Spring注解+Axis2开发WebService
			
    用Spring注解方式: 配置扫描指定包下的类 <context:component-scan base-package="包名" />   标识类为spring管理的 ...
    
			
    11.