选项卡jQuery实现
2016-06-07 18:18
369 查看
思路:就是刚开始把所有的的div都设置成display none。只设置一个是block。没次点击就改变他们的display属性值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery.js"></script> <style> #wrap ul{ list-style: none; overflow: hidden; padding: 0; } #wrap ul li{ float: left; border: 1px solid red; width: 100px; height: 30px; line-height: 30px; text-align: center; } #div1{ display: block; background: red; width: 300px; height: 300px; } #div2{ display: none; background: palegoldenrod; width: 300px; height: 300px; } #div3{ display: none; background: olive; width: 300px; height: 300px; } </style> </head> <body> <div id="wrap"> <ul> <li>tab1</li> <li>tab2</li> <li>tab3</li> </ul> <div id="div1">1</div> <div id="div2">2</div> <div id="div3">3</div> </div> </body> <script type="text/javascript"> $('#wrap > ul li').click(function(){ $('#wrap div').css('display','none'); $('#wrap div').eq($(this).index()).css('display','block') }) </script> </html>
相关文章推荐
- jquery 获取 动态input等元素的id
- Jquery实现如何关闭离开页面时提醒
- Jquery-1实现简单的复选框删除增加操作
- jquery实现滚动到页面底部时无限加载内容的代码
- jquery控制复选框
- jquery为多个元素添加事件
- 11个好用的jQuery拖拽拖放插件
- [转]Hide or Remove jquery ui tab based on condition
- jQuery获取表格中一行的值和获取重复ID的值
- jquery给easyui-window的title赋值
- jquery实现返回顶部、底部功能
- 基于jQuery下拉选择框插件支持单选多选功能代码
- jQuery原理系列-css选择器的简单实现
- jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position
- jQuery深入之源码解析(四)——分离构造器
- web前端复习(一):jquery实现轮播
- jQuery 如何先创建、再修改、后添加DOM元素
- jQuery.Autocomplete实现自动完成参数详解
- jQuery原理系列-常用Dom操作详解
- 浅谈jQuery 选择器和dom操作