<style>
.honver{ color:red;}

</style>
<script src="../js/jquery-1.9.0.min.js"></script>
<div>yyyyyyyyyyy</div>

<ul>
<li class="honver">A</li>
<li >B</li>
<li >C</li>
</ul>
<ul>
<li>111111111111111</li>
<li style="display:none;">2222222</li>
<li style="display:none;">33333333333</li>
</ul>

<div>zzzzzzzzzzzzzzz</div>

<script>
$("ul li ").bind("click", function(){
$(this).addClass('honver').siblings().removeClass('honver');;
var indexval = $("li").index(this);
$(this).parent().next('ul').children().eq(indexval).show().siblings().hide();
});
</script>

一个TAB的jquery简单写法的更多相关文章

  1. 一个TAB的jquery简单写法2

    <style> .honver{ color:red;} </style><script src="jquery-1.9.0.min.js">& ...

  2. jquery常用写法简单记录

    好久不写东西了......话不多说,主要记录一下,最近做的项目中用到的js的记录(虽然特别特别简单) 一 jquery常用写法记录 jQuery(this).addClass("select ...

  3. ConstraintLayout+radioGroup做一个tab.简单好用。

    主页tab是必须会有的,各种实现也很多.各有千秋.但目标都是简单.可控.今天用ConstraintLayout+radioGroup做一个tab.简单性可控性都还可以.本文目的把ConstraintL ...

  4. 使用jQuery简单实现返回顶部的一个小案例

    1.简单写一个页面 首先我们应该创建两个盒子,container盒子主要模拟页面滚动到的位置,back盒子主要功能是实现返回顶部的功能 2.简单的对这两个盒子写一些样式 我们应该先将返回顶部盒子隐藏( ...

  5. 模拟jQuery简单封装ajax

    /*模拟jQuery的写法 (简单写法)*/ var $={}; /*ajax*/ $.ajax = function (options) { /* * 请求 * 1.请求接口 type get po ...

  6. jQuery 插件写法2

    转载:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented-m ...

  7. jQuery 插件写法

    一.jQuery插件的类型 1. jQuery方法 很大一部分的jQuery插件都是这种类型,由于此类插件是将对象方法封装起来,在jQuery选择器获取jQuery对象过程中进行操作,从而发挥jQue ...

  8. Tab选项卡的原生写法

    关键点:建立点击事件和显示事件的连接,即点li 1让对应的div1出来,很容易想到遍历.索引 ;;} ul,li{list-style: none;} .tab{background: rgba(2, ...

  9. [转]jQuery插件写法总结以及面向对象方式写法

    本文转自:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented ...

随机推荐

  1. div+css居中

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

  2. Playrix Codescapes Cup (Codeforces Round #413, rated, Div. 1 + Div. 2) 一夜回到小学生

    我从来没想过自己可以被支配的这么惨,大神讲这个场不容易掉分的啊 A. Carrot Cakes time limit per test 1 second memory limit per test 2 ...

  3. 九度oj 题目1096:日期差值

    题目描述: 有两个日期,求两个日期之间的天数,如果两个日期是连续的我们规定他们之间的天数为两天 输入: 有多组数据,每组数据有两行,分别表示两个日期,形式为YYYYMMDD 输出: 每组数据输出一行, ...

  4. 【Luogu】P3052摩天大楼里的奶牛(遗传算法乱搞)

    一道状压题,但今天闲来无事又用遗传乱搞了一下. 设了一个DNA数组,DNA[i]记录第i个物品放在哪个组里.适应度是n-这个生物的组数+1. 交配选用的是轮盘赌和单亲繁殖——0.3的几率单点变异.(事 ...

  5. Spoj-FACVSPOW Factorial vs Power

    Consider two integer sequences f(n) = n! and g(n) = an, where n is a positive integer. For any integ ...

  6. vue项目实战, webpack 配置流程记录

    vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...

  7. 淘金(bzoj 3131)

    Description 小Z在玩一个叫做<淘金者>的游戏.游戏的世界是一个二维坐标.X轴.Y轴坐标范围均为1..N.初始的时候,所有的整数坐标点上均有一块金子,共N*N块.    一阵风吹 ...

  8. 洛谷 [P1290] 欧几里得的游戏

    SG函数的应用 看到这题就想到了SG函数 那么可以考虑最终情况:一个数是x,另一个是0,那么先手必败(因为上一个人已经得到0了,其实游戏已经结束了) 剩下的情况:一个数n, 一个数m,假设n>m ...

  9. MongoDB_spring整合mongodb

    参考 spring data mongodb 设置副本集读写分离模式  https://blog.csdn.net/u010889990/article/details/42644963

  10. python练习之-计算器

    学习以堆栈模式编写-计算器 堆栈特点:先进后出, 如下: #!/opt/python3/bin/python3 # Author: yong import re def is_symbol(eleme ...