<!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. 第九章 Python之面向对象
			
    面向对象编程 面向对象编程是一种程序设计思想,它把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数 面向过程的程序设计把计算机程序视为一系列命令的集合,即一组函数的顺序执行.为了简化程序设计 ...
    
			
    2. 
						
  2. Pyhton学习——Day29
			
    #异常与错误# 什么是异常?# 异常就是程序运行时发生错误的信号,在程序出现错误时,则会产生异常,若没有程序处理,则会抛出异常# 导致程序在异常语句处崩溃终止# Traceback 追踪异常信号:** ...
    
			
    3. 
						
  3. [luogu] P3210 [HNOI2010]取石头游戏（贪心）
			
    P3210 [HNOI2010]取石头游戏 题目描述 A 公司正在举办一个智力双人游戏比赛----取石子游戏,游戏的获胜者将会获得 A 公司提供的丰厚奖金,因此吸引了来自全国各地的许多聪明的选手前来参 ...
    
			
    4. 
						
  4. Unity 多场景打包
			
    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/50580641 作者:car ...
    
			
    5. 
						
  5. css表格表单和统筹
			
    css:表格表单和统筹 学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景 一.表单标签及属性高级 回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...
    
			
    6. 
						
  6. excel2013超链接进不去，提示“您的组织策略不允许...”
			
    搜索regedit 然后找到HKEY_CURRENT_USER->Software->Classes->.html 右键修改或者双击修改数值数据为Htmlfile 关闭之后此窗口,关 ...
    
			
    7. 
						
  7. [terry笔记]对人员列表文件进行数据库操作
			
    原文件(数据已经脱敏): staff_id,name,age,phone,dept,enroll_date1,姬建明,25,152015410,运维,2013-11-012,刘海龙,26,186184 ...
    
			
    8. 
						
  8. 工具-VS使用GIT工具
			
    由于VS中集成了GIT插件,本机安装了GIT工具和TortoiseGit工具,造成在VS中GIT无法同步,于是将TortoiseGit卸载,再次启用VS中的GIT插件,重新初始化GIT文件夹,问题解决 ...
    
			
    9. 
						
  9. 洛谷——P2483 [SDOI2010]魔法猪学院
			
    https://www.luogu.org/problem/show?pid=2483 题目描述 iPig在假期来到了传说中的魔法猪学院,开始为期两个月的魔法猪训练.经过了一周理论知识和一周基本魔法的 ...
    
			
    10. 
						
  10. Linux 网络搭建
			
    如果系统环境崩溃.   调用/usr/bin/vim /etc/profile Windows    1 本地连接使用固定IP   vmware 8    2  修改Windows的hosts地址   ...
    
			
    11.