用jquery写了个选项卡,当作一个笔记吧。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=1024" />
<meta name="description" content="" />
<meta name="Keywords" content="" />
<title>Demo</title>
<style type="text/css">
.left{float:left;}
.right{float:right;}
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
body{margin:0; padding:0; width:100%;}
ul{margin:0; padding:0;}
li{list-style:none;}
.wp {width:1000px; margin:0 auto;position:relative;}
.slidebox{width:150px; height:200px; border:1px solid #000; margin-left:20px;}
.slidebox ul li{margin-top:10px;}
.slidebox {position:relative;}
.slidebox ul{position:absolute; left:0; top:0; z-index:1; display:none;}
.heigh_tp{right:10px; top:10px;}
.heigh_tp span{width:10px; height:10px; background:blue; display:inline-block; border-radius:50%; cursor:pointer; position:relative; z-index:2;}
.heigh_tp .current{background:red;}
</style> </head>
<body> <div class="slidebox">
<div class="heigh_tp">
</div>
<ul>
<li>javascript程序设计1</li>
<li>javascript程序设计1</li>
<li>javascript程序设计1</li>
<li>javascript程序设计1</li>
</ul>
<ul>
<li>javascript程序设计2</li>
<li>javascript程序设计2</li>
<li>javascript程序设计2</li>
<li>javascript程序设计2</li>
</ul>
<ul>
<li>javascript程序设计3</li>
<li>javascript程序设计3</li>
<li>javascript程序设计3</li>
<li>javascript程序设计3</li>
</ul>
</div>
<div class="slidebox">
<div class="heigh_tp">
</div>
<ul>
<li>javascript程序设计1</li>
<li>javascript程序设计1</li>
<li>javascript程序设计1</li>
<li>javascript程序设计1</li>
</ul>
<ul>
<li>javascript程序设计2</li>
<li>javascript程序设计2</li>
<li>javascript程序设计2</li>
<li>javascript程序设计2</li>
</ul>
<ul>
<li>javascript程序设计3</li>
<li>javascript程序设计3</li>
<li>javascript程序设计3</li>
<li>javascript程序设计3</li>
</ul>
</div> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(".slidebox").each(function(){
var ulLeng=$("ul",this).size();
for(var i=0;i<ulLeng;i++){
$(".heigh_tp",this).append("<span></span>") //算是动态创建吧..
};
var index;
var parter;
var parterpar;
$(".heigh_tp span",this).click(function(){
var curIndex=$(this).index();
if(index==curIndex){return false;} //解决一个在当前选项仍会执行动画效果的问题
index=$(this).index(); parter=$(this).parent();
parterpar=$(this).parent().parent();
showtab(index); }).eq(0).click();
function showtab(index){
$("span",parter).removeClass("current");
$("span",parter).eq(index).addClass("current");
$("ul",parterpar).fadeOut();
$("ul",parterpar).eq(index).fadeIn();
}
})
//写完发现了几个问题, 第一个是each()函数的用法, 还有关于本文中的ul的自动分页还没有构思好, 这里面的涉及到了个变量作用域的问题等等,求各位大牛能给小弟些建议和指正...
</script>
</body>
</html>
经过几个月的挣扎, 作为一个刚没有任何底层语言基础,没有任何编程经验的前端程序员,深知这条路难走, 但是我不会放弃的。哈哈哈哈哈。
用jquery写了个选项卡,当作一个笔记吧。的更多相关文章
- 用jquery写循环播放div的相关笔记 珍贵的总结 -1
用jquery写循环播放div line-height应用的元素的 层次? line-heig字ht, 叫行高, 仅仅是指 文/文本, 而不管图片. line-height是容器中 文本行 与 文本行 ...
- 用jQuery写了一个模态框插件
用jQuery写了一个模态框插件 大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").con ...
- 如何使用jQuery写一个jQuery插件
jQuery插件其实是前端框架的思维,构成一个框架,个人认为必须满足以下几个基础条件:1. 可重用,2. 兼容性,3. 维护方便,虽说现在有很多比较成熟的前端框架,但是也有部分存在配置麻烦,学习成本大 ...
- 为jQuery写插件
很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...
- 基于JQUERY写的 LISTBOX 选择器
本文来之于:http://blog.csdn.net/jetsteven/article/details/5104380# 1.经常用到如下图的选择器,而且要支持排序的,所以萌生用JQUERY写一个. ...
- 用jQuery写的最简单的表单验证
近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...
- 用jQuery写的轮播图
效果图: GitHub地址:https://github.com/123456abcdefg/Javascript 大家可以下载源码查看. 与前一篇写的轮播图实现的效果一致,这个是用jQuery写的, ...
- jQuery写省级联动列表,创造二维数组,以及如何存/调用二维数组中的数据
jQuery写省级联动列表,创造二维数组来存放数据,然后通过each来遍历调用,通过creatTxtNode创建文本节点,通过createElement创建标签option,在通过append将文本写 ...
- 第二百节,jQuery EasyUI,Tabs(选项卡)组件
jQuery EasyUI,Tabs(选项卡)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 5.选项卡面板 本节课重点了解 EasyUI 中 Tabs(选项卡)组件的使用方 ...
随机推荐
- Redis源码阅读笔记(1)——简单动态字符串sds实现原理
首先,sds即simple dynamic string,redis实现这个的时候使用了一个技巧,并且C99将其收录为标准,即柔性数组成员(flexible array member),参考资料见这里 ...
- Subsets II ——LeetCode
Given a collection of integers that might contain duplicates, nums, return all possible subsets. Not ...
- C字符数组及其应用
1.字符数组和其他数值类型的数组的定义引用和初始化都是相同的. 特别注意的是: 在C语言中没有专门的字符串变量,通常用一个字符数组来存放一个字符串. \0'是由C编译系统自动加上的. 2. C语言允许 ...
- HDOJ(HDU) 2192 MagicBuilding(用Java的Map做了下)
Problem Description As the increase of population, the living space for people is becoming smaller a ...
- CodeForces 592B
题目链接: http://codeforces.com/problemset/problem/592/B 这个题目没啥说的,画图找规律吧,哈哈哈 程序代码: #include <cstdio&g ...
- Access denied for user 'root'@'localhost' (using password:YES) 解决方案
1.打开MySQL目录下的my.ini文件,在文件的最后添加一行“skip-grant-tables”,保存并关闭文件. 2.重启MySQL服务. 3.在命令行中输入“mysql -uroot -p” ...
- Prime Ring Problem(搜索)
http://acm.hdu.edu.cn/showproblem.php?pid=1016 / 题意; 给你一个数n ,求出所有的排列 这些排列的特征是任意相邻的两数只和是素数,而且首位只和也是素数 ...
- www.chenbowenblog.com 博客地址转移
我的新博客地址是 www.chenbowenblog.com 欢迎来访.
- Eclipse Python配置
Macbook上面安装pydev后,发现新建project后并没有PyDev的选项.在官网上搜索后发现是JDK版本太久.上Oracle官网下载了最新JDK(url: http://www.oracle ...
- [Angular 2] Using Pipes to Filter Data
Pipes allow you to change data inside of templates without having to worry about changing it in the ...