<!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. 安装hadoop

    生成yum源 cd /var/ftp/pub/cdh/5 createrepo --update . 从节点 yum clean all 配置yum库 /etc/yum.repos.d # cat / ...

  2. JSON 之 SuperObject(1)

    一直盼着 Delphi 能够直接支持 "正则表达式" 与 "JSON"; Delphi 2009 刚来的时候, 有了 JSON, 但不好, 那时尝试过一点. 这 ...

  3. Oracle数据库之三

    子查询 -- 就是在一个查询中包含多个select语句(一般就2个) select id,first_name,dept_id from s_emp; 想查询和Ben一个部门的员工的id,first_ ...

  4. 红黑树、B(+)树、跳表、AVL等数据结构，应用场景及分析，以及一些英文缩写

    在网上学习了一些材料. 这一篇:https://www.zhihu.com/question/30527705 AVL树:最早的平衡二叉树之一.应用相对其他数据结构比较少.windows对进程地址空间 ...

  5. ASP.NET中动态获取数据使用Highcharts图表控件【Copy By Internet】

    具体实现的效果如图:

  6. 51nod1119 机器人走方格 V2

    终于学到了求组合数的正确姿势 //C(n+m-2,m-1) #include<cstdio> #include<cstring> #include<cctype> ...

  7. C#基本数据类型

    在第一章我们了解了C#的输入.输出语句后,我这一节主要是介绍C#的基础知识,本节的内容也是后续章节的基础,好的开端等于成功的一半.在你阅读完本章后,你就有足够的C#知识编写简单的程序了.但还不能使用继 ...

  8. 【经验】Windows7、8、8.1 MSI安装错误Error Code 2502 & 2503 解决方法

    [因] 今天升级TortoiseSVN到1.8.8,出现问题:Error Code 2502 & 2503,一直不能安装成功. 上网一搜,国内没找到好的解决方法,在一个外文网上找到了方案,原链 ...

  9. iOS8 LaunchScreen.storyboard

    我目前的需求是需要将启动图片通过LaunchScreen.storyboard  来实现. 我首先想到的是创建一个Sb,使用自动布局来布局imageview,并设置如下图: 布局好之后,在Image里 ...

  10. 想找个计算器当本命？来试试UWP应用《纸书科学计算器》

    久违了.上次在博客园发文还是4年前,正是高中参加NOIP的时候.这4年里发生了很多事,乃至再次看到过去的文章时,仿佛看到了自己也不熟悉的风景.最近很想把我的博客重新拾起来,慢慢灌溉,写一些微不足道的技 ...