<!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. many to one could not resolve property

    今天在做一个功能的时候 遇到了.一个Could not resolve property 的问题. 配置文件如下: <many-to-one name="user"  cla ...

  2. C# Winform 获取天气情况

    WebServices(http://www.webxml.com.cn/WebServices/WeatherWebService.asmx)来实现天气预报,该天气预报 Web 服务,数据来源于中国 ...

  3. blade全集

    http://daylerees.com/codebright/blade

  4. some resource favor

    http://www.moxiemanager.com/getit/ : picture file manage with blur 可以和Tinymce结合使用完美实现WYSIWYG的效果 http ...

  5. [ionic开源项目教程] - 第2讲 新建项目,配置app.js和controllers.js搭建基础视图

    新建项目 由项目功能架构图选择合适的页面架构,这里选用Tab,ionic新建项目,默认的模板就是tab. $ ionic start TongeNews Creating Ionic app in f ...

  6. HDU 1372 Knight Moves【BFS】

    题意:给出8*8的棋盘,给出起点和终点,问最少走几步到达终点. 因为骑士的走法和马的走法是一样的,走日字形(四个象限的横竖的日字形) 另外字母转换成坐标的时候仔细一点(因为这个WA了两次---@_@) ...

  7. UISegment

    UISegment分段控制 属性 1.segmentedControlStyle 设置segment的显示样式. typedef NS_ENUM(NSInteger, UISegmentedContr ...

  8. wdcp v3 Forbidden :You don't have permission to access /phpmyadmin on this server

    First edit the file /www/wdlinux/apache/conf/vhost/00000.default.conf and add the additional line to ...

  9. UVA 11865 Stream My Contest 组网 (朱刘算法,有向生成树,树形图)

    题意: 给n个点编号为0~n-1,0号点为根,给m条边(含自环,重边),每条边有个代价,也有带宽.给定c,问代价不超过c,树形图的最小带宽的最大值能达到多少? 思路: 点数才60,而带宽范围也不大,可 ...

  10. 【Java】MD5加密

    package sdfg; import java.math.BigInteger; import java.security.MessageDigest; import java.security. ...