<!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. 设置mySql的编码方式为utf-8
			
    检查命令: mysql> show variables like '%char%'; 期望结果: 使用mysql命令设置: 如果仍有编码不是utf8的,请检查配置文件,也可使用mysql命令设置 ...
    
			
    2. 
						
  2. 面试题sql
			
    查询书的价格10到20 之前显示10to20 没有显示unknown CREATE TABLE book(price INT,NAME VARCHAR(20)) SELECT NAME AS '名字' ...
    
			
    3. 
						
  3. bzoj 3028: 食物 生成函数_麦克劳林展开
			
    不管怎么求似乎都不太好求,我们试试生成函数.这个东西好神奇.生成函数的精华是两个生成函数相乘,对应 $x^{i}$ 前的系数表示取 $i$ 个时的方案数. 有时候,我们会将函数按等比数列求和公式进行压 ...
    
			
    4. 
						
  4. Someing-About-Work
			
    投料分拨次评估1.调试线投料分波次:(由调试厂录入生产计划:按照实际装机计划做二次分拣)1)计划组必须改两次工单:因为使用的是不同的任务号,一次一次分拣,一次二次分拣,2)计划核对数量困难,不能按照制 ...
    
			
    5. 
						
  5. JS 日历
			
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...
    
			
    6. 
						
  6. 机器学习实战笔记--AdaBoost（实例代码）
			
    #coding=utf-8 from numpy import * def loadSimpleData(): dataMat = matrix([[1. , 2.1], [2. , 1.1], [1 ...
    
			
    7. 
						
  7. 浅谈冒烟测试（Smoke Testing）
			
    鉴于之前跟开发提到提测前需要进行冒烟测试,然后几个开发一脸迷茫的问我:什么叫冒烟测试?所以我准备跟大家从以下几个方面简单的分享一下什么是冒烟测试. 一.软件测试的分类 二.冒烟测试(Smoke Tes ...
    
			
    8. 
						
  8. 使用python备份指定目录并删除备份超过一定时长的文件
			
    #!/usr/bin/env python #-*- coding: utf-8 -*- """ @Project:Py @author: @Email: @Softwa ...
    
			
    9. 
						
  9. iipccsxxtnsoiq
			
    gxspvyheuetwqgnbwmwd
    
			
    10. 
						
  10. Windows下面使用curl
			
    Windows下面使用curl 学习了:https://www.cnblogs.com/xing901022/p/4652624.html 下载地址:https://curl.haxx.se/down ...
    
			
    11.