<!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. jquery获取自定义属性的值
			
    //获取属性值 1 <div id="text" value="黑哒哒的盟友"><div> jQuery取值: $("#tex ...
    
			
    2. 
						
  2. Python介绍与学习
			
    Python是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum于1989年发明,第一个公开发行版发行于1991年. Python是纯粹的自由软件, 源代码和解释器CPy ...
    
			
    3. 
						
  3. HDU1166 敌兵布阵 线段树详解
			
    题解: 更新是线段树的单点更新,简单一点. 有50000个阵营,40000查询,用普通数组肯定超时.区间求和和区间查询问题用线段树最好不过了. 先说说什么是线段树. 区间[1,10]用树的方法存起来, ...
    
			
    4. 
						
  4. luoguP5055 【模板】可持久化文艺平衡树 可持久化非旋转treap
			
    好题. Code: #include<bits/stdc++.h> using namespace std; #define setIO(s) freopen(s".in&quo ...
    
			
    5. 
						
  5. 8:30+1.5小时,返回时间格式的 php函数
			
    一个实用的自定义函数 /** * 传入8:30格式的开始时间,和小数形式的小时长度,返回结束时间 * @param [type] $start [description] 8:30 * @param  ...
    
			
    6. 
						
  6. 【【henuacm2016级暑期训练】动态规划专题 N】Valid Sets
			
    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 给你一棵树. 让你统计其中子树T的数量. 这个子树T要满足最大值和最小值之差小于等于d 树形DP 可以枚举点root为子树的根. 统 ...
    
			
    7. 
						
  7. mysql5.7官网直译SQL语句优化--分组优化
			
    1.14Group By Optimization 分组优化 大多数方法为了满足分组查询需要扫描整个表并且创建一个临时表,其中每组中的值都是连续的,如果可以使用聚合函数和临时表获取各个分组.在某些情况 ...
    
			
    8. 
						
  8. [debug]重定义默认參数
			
    编敲代码过程中遇到重定义默认參数的错误,例如以下例所看到的: #include<iostream> #include<stdlib.h> using namespace std ...
    
			
    9. 
						
  9. 换今日特价图片---轻开电子商务系统(企业入门级B2C站点)
			
    跟换主页轮播图片一样,一共4个文件: 列表显示文件:site/links/img2.html 加入图片文件:site/links/img2_add.html 加入保存图片文件:site/links/i ...
    
			
    10. 
						
  10. m_Orchestrate learning system---二十二、html代码如何变的容易
			
    m_Orchestrate learning system---二十二.html代码如何变的容易 一.总结 一句话总结:(结构清晰之后构建页面就变得超级容易了)(多做多用一下子就熟了) 1.文章显示页 ...
    
			
    11.