<!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. Getting Started Synchronizing Files

    https://msdn.microsoft.com/en-US/library/bb902813(v=sql.110).aspx Sync Framework includes a file syn ...

  2. json和jsonp的使用格式

    最近一直在看关于json和jsonp的区别和各自的用法.优缺点!  下面是我看到过解释最清楚的一片文章 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求 ...

  3. DataGridView导出Excel

    将DataGridView里面的数据,导出到表格里面去. 首先,需要添加三个引用 直接在解决方案里,右键添加引用,找到路径即可.然后再把这三个文件复制到项目的根目录下. 然后定义导出表格的函数: pu ...

  4. 什么是PHP Guzzle?

    Guzzle是一个使得利用PHP实现发送HTTP 请求,方便和web service集成的PHP 客户端模拟组件.一句话,它就像一个PHP写的浏览器.当你的服务端程序需要作为客户端来访问其他的serv ...

  5. linux字符驱动程序结构

    linux内核为字符设备的驱动程序设计,提供了一些数据结构,和函数,供开发人员调用,将设备驱动程序注册到内核去.现代操作系统几乎都不直接和硬件通信,而是通过定义的接口,是硬件厂商自己来开发符合标准某个 ...

  6. QDialog之屏蔽Esc键

    简述 Qt中Esc键会在一些控件中默认的进行一些事件的触发,比如:QDialog,按下Esc键窗口消失.大多数情况下,我们不需要这么做,那么就需要对默认事件进行屏蔽. 简述 源码分析 事件过滤器 事件 ...

  7. HDU 4006 The kth great number【优先队列】

    题意:输入n行,k,如果一行以I开头,那么插入x,如果以Q开头,则输出第k大的数 用优先队列来做,将队列的大小维护在k这么大,然后每次取队首元素就可以了 另外这个维护队列只有k个元素的时候需要注意一下 ...

  8. 梯度下降之随机梯度下降 -minibatch 与并行化方法

    问题的引入: 考虑一个典型的有监督机器学习问题,给定m个训练样本S={x(i),y(i)},通过经验风险最小化来得到一组权值w,则现在对于整个训练集待优化目标函数为: 其中为单个训练样本(x(i),y ...

  9. AIX 第2章 指令记录

    root@db:/#mount  node       mounted        mounted over    vfs       date        options     ------- ...

  10. HBase 系统架构

    HBase是Apache Hadoop的数据库,能够对大型数据提供随机.实时的读写访问.HBase的目标是存储并处理大型的数据.HBase是一个开源的,分布式的,多版本的,面向列的存储模型.它存储的是 ...