<!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写了个选项卡,当作一个笔记吧。的更多相关文章

  1. 用jquery写循环播放div的相关笔记 珍贵的总结 -1

    用jquery写循环播放div line-height应用的元素的 层次? line-heig字ht, 叫行高, 仅仅是指 文/文本, 而不管图片. line-height是容器中 文本行 与 文本行 ...

  2. 用jQuery写了一个模态框插件

    用jQuery写了一个模态框插件 大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").con ...

  3. 如何使用jQuery写一个jQuery插件

    jQuery插件其实是前端框架的思维,构成一个框架,个人认为必须满足以下几个基础条件:1. 可重用,2. 兼容性,3. 维护方便,虽说现在有很多比较成熟的前端框架,但是也有部分存在配置麻烦,学习成本大 ...

  4. 为jQuery写插件

    很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...

  5. 基于JQUERY写的 LISTBOX 选择器

    本文来之于:http://blog.csdn.net/jetsteven/article/details/5104380# 1.经常用到如下图的选择器,而且要支持排序的,所以萌生用JQUERY写一个. ...

  6. 用jQuery写的最简单的表单验证

    近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...

  7. 用jQuery写的轮播图

    效果图: GitHub地址:https://github.com/123456abcdefg/Javascript 大家可以下载源码查看. 与前一篇写的轮播图实现的效果一致,这个是用jQuery写的, ...

  8. jQuery写省级联动列表,创造二维数组,以及如何存/调用二维数组中的数据

    jQuery写省级联动列表,创造二维数组来存放数据,然后通过each来遍历调用,通过creatTxtNode创建文本节点,通过createElement创建标签option,在通过append将文本写 ...

  9. 第二百节,jQuery EasyUI,Tabs(选项卡)组件

    jQuery EasyUI,Tabs(选项卡)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 5.选项卡面板 本节课重点了解 EasyUI 中 Tabs(选项卡)组件的使用方 ...

随机推荐

  1. bluetooth记录

    1. 网址 Client Characteristic Configuration https://developer.bluetooth.org/gatt/descriptors/Pages/Des ...

  2. 搜索(四分树):BZOJ 4513 [SDOI2016 Round1] 储能表

    4513: [Sdoi2016]储能表 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 395  Solved: 213[Submit][Status] ...

  3. 【最大流】BAPC2014 A Avoiding the Apocalypse (Codeforces GYM 100526)

    题目链接: http://codeforces.com/gym/100526 http://acm.hunnu.edu.cn/online/?action=problem&type=show& ...

  4. zoj 3672 Gao The Sequence

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4915题意:a[k]-一个任意的数,这个数要等于a[1]~a[k]每个数减去任意 ...

  5. Codeforces Round #216 (Div. 2) E. Valera and Queries 树状数组 离线处理

    题意:n个线段[Li, Ri], m次询问, 每次询问由cnt个点组成,输出包含cnt个点中任意一个点的线段的总数. 由于是无修改的,所以我们首先应该往离线上想, 不过我是没想出来. 首先反着做,先求 ...

  6. CentOS-6.4-i386硬盘安装

    由于安装程序不能识别NTFS分区上的镜像,因此需要变通,网上可参考的文章分为两种方法: 1.使用分区工具创建EXT分区,再用Windows下可访问EXT分区的软件,将安装镜像拷入进行安装. 2.使用分 ...

  7. Jenkins 五: 构建Ant项目

    1. 点击“新建”,在“Item名称”栏输入要构建的项目名,比如“Ant_project”,选择“构建一个自由风格的软件项目”,点击“OK”按钮. 2. 找到“源码管理”-> “Subversi ...

  8. Oulipo - HDU 1686 (KMP模板题)

    题目大意:题目叙述很多,其实只看输入输出也能明白什么意思,给两个串W,T, 判断T串中包含几个串W.   分析:还是基础的KMP应用....................... 直接上代码. === ...

  9. Oracle Locks之DML锁

    Oracle通过锁来实现数据库的并发控制 Oracle Database automatically locks a resource on behalf of a transaction to pr ...

  10. sql第一课笔记

    这是我看了imooc的视频教程之后重新写的笔记. 虽然之前也是学习过SQL Server数据库,但是也是忘记得差不多了.现在重新捡起来,安装一次数据库练习,使用的是mysql. 第一课是最简单的创建, ...