<style>
 .honver{ color:red;}

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

<ul>
 <li class="honver">A</li>
 <li >B</li> 
 <li  >C</li>
</ul>

<div>111111111111111</div>
<div style="display:none;">2222222</div>
<div  style="display:none;">33333333333</div>

<div>zzzzzzzzzzzzzzz</div>
<div>cccccccccccccc</div>

<script>
$("ul li ").click(function(){
$(this).addClass('honver').siblings().removeClass('honver');;
var indexval = $("li").index(this); var a = $("ul").nextAll('div').eq(indexval).text();
var b =$("ul li").size();
var obj =$("ul").nextAll('div');
obj.hide();
obj.eq(indexval).show();
var c = b-1;
obj.eq(c).nextAll('div').show();
});
</script>

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

  1. 一个TAB的jquery简单写法

    <style> .honver{ color:red;} </style><script src="../js/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. C++中四种强制类型转换方式

    类型转换有c风格的,当然还有c++风格的.c风格的转换的格式很简单(TYPE)EXPRESSION,但是c风格的类型转换有不少的缺点,有的时候用c风格的转换是不合适的,因为它可以在任意类型之间转换,比 ...

  2. Java线程和多线程(三)——线程安全和同步

    线程安全在Java中是一个很重要的课题.Java提供的多线程环境支持使用Java线程.我们都知道多线程共享一些对象实例的话,可能会在读取和更新共享数据的事后产生数据不一致问题. 线程安全 之所以会产生 ...

  3. django的rest framework框架——分页、视图、路由、渲染器

    一.rest framework的分页 1.使用rest framework内置类PageNumberPagination实现分类 from django.conf.urls import url f ...

  4. hibernate 学习

    hibernate.cg.xml 可以通过myeclipse自动生成,添加数据库信息: <?xml version='1.0' encoding='UTF-8'?> <!DOCTYP ...

  5. C#显示相机实时画面

    public partial class Form1 : Form { ICogAcqFifo mAcqFifo2;//定义一个相机对象 private ICogFrameGrabber mFrame ...

  6. awk中next以及getline用法示例

    在awk中,如果调用next,那么next之后的命令就都不执行了.此行文本的处理到此结束,开始读取下一条记录并操作. 实例如下: [plain] view plain copy zoer@ubuntu ...

  7. svg path 动画效果

    http://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8% ...

  8. springboot集成redis操作

    使用HashOperations操作redis----https://www.cnblogs.com/shiguotao-com/p/10560458.html 使用HashOperations操作r ...

  9. Leetcode 322.零钱兑换

    零钱兑换 给定不同面额的硬币 coins 和一个总金额 amount.编写一个函数来计算可以凑成总金额所需的最少的硬币个数.如果没有任何一种硬币组合能组成总金额,返回 -1. 示例 1: 输入: co ...

  10. TOJ 2596: Music Notes

    2596: Music Notes  Time Limit(Common/Java):1000MS/10000MS     Memory Limit:65536KByteTotal Submit: 3 ...