<!doctype html>

<html>

<head>

<meta charset="utf-8">

<style>

ul,li{

    list-style-type:none;

    }

li{

    width:50px;

    height:30px;

    background:white;

    border:1px solid #CCC;

    display:inline;

    padding:8px;

    cursor:pointer;

    }

div{

    width:400px;

    height:100px;

    border:1px #999999 solid;

    display:none;

    }

.active {

    background:#333;

    color:white;

    }

</style>

<script src="jquery-1.11.2.js"></script>

<script>

/*window.onload = function ()

{

    var ali = document.getElementsByTagName('li');

    var adiv = document.getElementsByTagName('div')

    for(var i = 0; i < ali.length; i++)

    {

        ali[i].index = i;

        ali[i].onclick = function ()

        {

            for(var i = 0; i < adiv.length; i++)

            {

                ali[i].className = '';

                adiv[i].style.display = 'none';

            }

            ali[this.index].className = 'active';

            adiv[this.index].style.display = 'block';

        }

    }

}*/

$(function ()

{

    $('li').click(function ()

    {

        $('li').attr('class','');

        $('div').css('display','none');

        $(this).attr('class','active');

        $('div').eq($(this).index()).css('display','block');

    })

})

</script>

<title>无标题文档</title>

</head>

<body>

<ul>

    <li >选项一</li>

    <li>选项二</li>

    <li>选项三</li>

</ul>

<div style="display:block;">11111</div>

<div>22222</div>

<div>33333</div>

</body>

</html>

jq 选项卡的更多相关文章

  1. jq选项卡切换功能

    效果图: <!DOCTYPE html> <html lang="en"> <head> <style> *{margin:0;pa ...

  2. jq的选项卡tab

    jq中选项卡很简单,的注意是他结构命名(网上有很多,其中不乏不规范) 1.tab 2.tab-hd (选项栏) 3.tab-bd(选项栏对应的内容) css代码(布局没问题,可以只看jquery代码) ...

  3. 看JQ时代过来的前端，如何转换思路用Vue打造选项卡组件

    前言 在Vue还未流行的时候,我们都是用JQuery来封装一个选项卡插件,如今Vue当道,让我们一起来看看从JQ时代过来的前端是如何转换思路,用数据驱动DOM的思想打造一个Vue选项卡组件. 接下来, ...

  4. 随手用JQ写个选项卡

    <div class="box"> <ul> <li class="one">选项卡1</li> <li& ...

  5. jq封装选项卡写法

    jq普通选项卡写法: var tabTag=$('#tabon'); var tabon=tabTag.find('li');//菜单栏 var tabCon=$(".hidden" ...

  6. JQ实现选项卡(jQuery原型插件扩展)

    下边分为两个版本,一种是点击切换选项(index.js),一种是滑过切换选项(index1.js) HTML文件: jq使用jquery-1.11.3.js版本 <!DOCTYPE html&g ...

  7. jq方法写选项卡的基本原理以及三种方法

    使用jq写选项卡,告别了繁琐的循环以及命名规范 基本原理: 1.当某一个btn被选中时,将这个btn的背景颜色设为橘色,其余兄弟btn背景颜色设为空(none) 2.如果子div与btn的索引相同,就 ...

  8. 用js和css实现选项卡效果+jq(2019-10-09)

    1效果图: 2代码: html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  9. 基于JQ的简版选项卡记录

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. explicit constructor(显示构造函数)

    按照默认规定,只有一个参数的构造函数也定义了一个隐式转换,将该构造函数对应的数据类型的数据转换为该类对象,如下所示: class String { String(const char* p) //用C ...

  2. win7下搭建opengles2.0编程环境

    原帖地址:http://sixgod.org/archives/72   1.下载AMD的OpenGL ES2.0的模拟器,地址: http://www.opengles-book.com/ESEmu ...

  3. 反编译android APK

    我们经常会在如下的情况使用反编译 1.看到别人应用中的酷炫功能,想知道是如何实现的 2.别人应用的素材排版好漂亮,想套用模仿   百度一下就已经有一大堆反编译的教程了,我还是坚持学习记录一下.   A ...

  4. 简单了解JAVA8的新特性

    JAVA8新特性会颠覆整个JAVA程序员的编程习惯 甚至如果您坚守JAVA7之前的编程习惯,今后你看比较年轻的程序员写的JAVA代码都会无法理解 所以为了保证不脱钩,我觉得有必要学习JAVA8的新特性 ...

  5. A1486. 树（王康宁）

    题目:http://www.tsinsen.com/A1486 题解: 其实看到和路径有关的就应该想到点分治. 我们找出重心之后遍历每一棵子树得到它的 { x=经过特殊点的个数,y=到rt的异或和} ...

  6. iso中AutoLayout和Autoresizing Mask的区别

    •在iOS6之前,关于屏幕旋转的适配和iPhone,iPad屏幕的自动适配,基本都是由Autoresizing Mask来完成的.但是随着大家对iOS App的要求越来越高,以及今后可能出现的多种屏幕 ...

  7. PS4破解

    1.输入序列号: # 序列号: # 1330-1082-3503-2270-3738-6738# 1330-1776-8671-6289-7706-2916# 1330-1567-6599-8775- ...

  8. margin collapse 之父子关系的DIV

    打算花点时间将知识整理一下,虽然平时现用现查都能完成工作,可是当遇到面试这种事情的时候,临时查就来不及了... 关于margin,整理若干知识点如下: 一:父子关系的DIV标签以及未加margin时的 ...

  9. AVL树的旋转实现

    AVL树:带有平衡条件的二叉查找树,即一棵AVL树是其每个节点的左子树和右子树的高度最多相差1的二叉查找树.一般通过Single Rotate和Double Rotate来保持AVL树的平衡.AVL树 ...

  10. js sleep效果

    js sleep效果 s = setInterval(function(){ //需要执行的函数 alert("我延迟了2秒弹出"); },2000); 并不是每2秒执行一次,而是 ...