div 内容点击切换的小技巧
来源:互联网 发布:青云志网络播放量 编辑:程序博客网 时间:2024/03/28 16:38
对于内容区的切换,假如是一个,二个,写2次就可以了,假如像sina里面的内容区切换多的时候又改怎么写呢,如果是10 个,我是吧上班要写10遍呢,这明显的不是我们要求的。所以我推荐一个小技巧。
就是在生成的内容区的div 的切换导航加个自定义属性 如:
<ul>
<li class="li" index="0">
<div class="div" style="display:none">li1</div>
</li>
<li class="li" index="1">
<div class="div" style="display:none">li1</div>
<li class="li" index="2">
<div class="div" style="display:none">li1</div>
<li class="li" index="3">
<div class="div" style="display:none">li1</div>
</ul>
好了 前期工作做好了 那么我们怎么实现呢
JS 部分如下:
$("ul li").click(function(){
var i = parseInt($(this).attr("index"));
var div = $(".div").eq(i);
div.css("display","block").siblings().css("display","none");
});
这样 就可以轻松完成导航切换内容。也不限制数量。。
- div 内容点击切换的小技巧
- div 内容点击切换的小技巧
- 点击标签切换DIV
- 点击div切换颜色;
- div 点击切换按钮样式
- js实现两个div左右并列显示,并实现点击标题,切换内容显示
- 点击元素或div切换该元素的背景图
- SharePoint 切换用户的小技巧
- 小技巧:实现view 的穿透点击
- UIButton小技巧----点击事件的范围
- css+div 的一些小技巧
- 点击UITableViewCell 来回切换内容
- 点击菜单栏实现内容切换
- jquery获取当前点击的div的内容
- 点击按钮切换相应的内容,可用于转换图片
- 点击menu导航切换,显示不同的内容模块
- JS—点击链接切换隐藏的内容
- js 点击在同一页切换不同的内容
- 通过图像转换软件打造95%原创文章--真的可以告别伪原创(有点扯)
- ARCSDE ORACLE 分开配置 启动sde问题
- XCode4.3创建第一个ios入门项目,翻译至官方教程(四)
- Actionscript语言中的get和set
- 老外用webdriver处理弹窗的N个方法
- div 内容点击切换的小技巧
- #R#字符串处理-grep/grepl/sub/gsub等等
- 链串
- Linux命令英文全称
- dom4j UTF-8编码的解决
- php ip转化成负整数
- link rel=canonical 用法
- Windows 7 安装 Rational Rose 启动报错:无法启动此程序,因为计算机中丢失 suite objects.dll。
- 小for的Cocos2d-x学习笔记与感悟8之场景切换和声音控制