<!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--csv文件读写
			
    最近刚注册了kaggle账号,练习了下简单的knn算法用于手写数字识别.下载的训练和测试文本都是使用csv文件存储的,所以在此重拾下csv模块. csv文件 csv全称(Comma-Separated ...
    
			
    2. 
						
  2. C编译时`true' undeclared (first use in this function)
			
    在编译C语言时有时会遇到这样的错误提示: 'true' undeclared (first use in this function) or `false' undeclared (first use ...
    
			
    3. 
						
  3. windows下Word使用-快捷键
			
    1.word全屏显示——Alt+U+V 2.上标——Ctrl+Shift+= 3.下标——Ctrl+=
    
			
    4. 
						
  4. laravel 知识点总结
			
    1.eloquent 关系理解: https://lvwenhan.com/laravel/423.html
    
			
    5. 
						
  5. fflush()函数总结
			
    1. 概述 函数名: fflush() 功 能: 清除读写缓冲区,需要立即把输出缓冲区的数据进行物理写入时 头文件: stdio.h 原型: int fflush(FILE *stream),其中st ...
    
			
    6. 
						
  6. BZOJ 3262 陌上花开 (三维偏序CDQ+树状数组)
			
    题目大意: 题面传送门 三维偏序裸题 首先,把三元组关于$a_{i}$排序 然后开始$CDQ$分治,回溯后按$b_{i}$排序 现在要处理左侧对右侧的影响了,显然现在左侧三元组的$a_{i}$都小于等 ...
    
			
    7. 
						
  7. MVC、RPC、SOA、微服务架构之间的区别
			
    MVC.RPC.SOA.微服务架构之间的区别 一.MVC架构 其实MVC架构就是一个单体架构. 代表技术:Struts2.springMVC.Spring.Mybatis 等等. 二.RPC架构 RP ...
    
			
    8. 
						
  8. 样本方差的无偏估计与（n-1）的由来
			
    一.无偏估计 所谓总体参数估计量的无偏性指的是,基于不同的样本,使用该估计量可算出多个估计值,但它们的平均值等于被估参数的真值. 在某些场合下,无偏性的要求是有实际意义的.例如,假设在某厂商与某销售商 ...
    
			
    9. 
						
  9. 洛谷 P2111 考场奇遇
			
    P2111 考场奇遇 题目背景 本市的某神校里有一个学霸,他的名字叫小明(为了保护主人公的隐私,他的名字都用“小明”代替).在这次的期中考试中,小明同学走桃花运,在考场上认识了一位女生,她的名字叫小红 ...
    
			
    10. 
						
  10. [Hyperapp] Render Text with JSX in Hyperapp
			
    Hyperapp is an ultra lightweight (1kb), minimal, functional, JavaScript library for building UIs. It ...
    
			
    11.