js点击a标签切换不同列表
2016-07-07 18:51
274 查看
<a href="#" class="fl active">想TA的人</a>
<a href="#" ></div>不想TA的人</a>
<div class="list">
<ul>
<li>我是1</li>
</ul>
</div>
<div class="list">
<ul>
<li>我是2</li>
</ul>
</div>
如题,两个a标签状态下如果为不同列表,点击判断第一个a标签显示对应的列表。
这里就用each循环,给对应的list添加对应a的索引值。
$("a").each(function(index){
$(this).click(function(){
$(this).addClass('active').siblings().removeClass('active');
$(".list").eq(index).show().siblings(".list").hide();
})
})
<a href="#" ></div>不想TA的人</a>
<div class="list">
<ul>
<li>我是1</li>
</ul>
</div>
<div class="list">
<ul>
<li>我是2</li>
</ul>
</div>
如题,两个a标签状态下如果为不同列表,点击判断第一个a标签显示对应的列表。
这里就用each循环,给对应的list添加对应a的索引值。
$("a").each(function(index){
$(this).click(function(){
$(this).addClass('active').siblings().removeClass('active');
$(".list").eq(index).show().siblings(".list").hide();
})
})
相关文章推荐
- Native.js示例汇总
- Javascript 严格模式use strict详解
- javascript案例——倒计时效果
- [Sencha ExtJS6 Modern] 改进bug: 当store.remove/removeAt执行之后,DataView的对应item的dom没有移除
- jsoup解析html
- PHP之JavaScript
- JS中的prototype
- jsp遍历、循环
- javascript 变量声明 和 作用域
- Jsoup|是什么?怎么用?
- Native.js概述
- aspx中如何加入javascript
- 去除字符串两边空格
- 基于Zepto的内容滑动插件:zepto.hwSlider.js
- 关于新建JSP文件后,文件开头报错的处理
- javascript变量类型、执行环境和作用域、垃圾回收
- NSJSONSerialization
- 来来来,一起五句话搞定JavaScript作用域 推荐
- 浅谈如何删除JSP编译后的空行
- Augularjs-起步