<!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. MTK6577 Android源代码目录

    MTK6577 Android源代码目录 1.     MTKAndroid4.0 源代码目录 (1)  makeMtk 整个工程编译或是构建(make/build)的入口. (2)  abi 应用程 ...

  2. 《OD大数据实战》HBase入门实战

    官方参考文档:http://abloz.com/hbase/book.html#shell_tricks 1.2.3. Shell 练习 用shell连接你的HBase $ ./bin/hbase s ...

  3. string中常用的函数

    string中常用的函数 发现在string在处理这符串是很好用,就找了一篇文章放在这里了.. 用 string来代替char * 数组,使用sort排序算法来排序,用unique 函数来去重1.De ...

  4. Eclipse 上安装 Maven3插件

    原文:http://www.cnblogs.com/quanyongan/archive/2013/04/18/3028181.html eclipse 安装插件的方式最常见的有两种: 1. 一种是在 ...

  5. [转] POJ DP问题

    列表一:经典题目题号:容易: 1018, 1050, 1083, 1088, 1125, 1143, 1157, 1163, 1178, 1179, 1189, 1191,1208, 1276, 13 ...

  6. warning:performSelector may cause a leak because its selector

    warning:performSelector may cause a leak because its selector     在ARC项目中使用 performSelector: withObj ...

  7. VFL示例

    •[cancelButton(72)]-12-[acceptButton(50)] •取消按钮宽72point,accept按钮宽50point,它们之间间距12point • •[wideView( ...

  8. 20160126.CCPP体系详解(0005天)

    程序片段(01):eatmem.c 内容概要:语句和逻辑结构 #include <stdio.h> #include <stdlib.h> #include <Windo ...

  9. 基于核方法的模糊C均值聚类

    摘要: 本文主要针对于FCM算法在很大程度上局限于处理球星星团数据的不足,引入了核方法对算法进行优化.  与许多聚类算法一样,FCM选择欧氏距离作为样本点与相应聚类中心之间的非相似性指标,致使算法趋向 ...

  10. yii 打印sql

    $query = TableModel::find()->where([‘xxx’=>xxx]); var_dump($query->prepare(\Yii::$app->d ...