<!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. 【转】Android低功耗蓝牙应用开发获取的服务UUID

    原文网址:http://blog.csdn.net/zhangjs0322/article/details/39048939 Android低功耗蓝牙应用程序开始时获取到的蓝牙血压计所有服务的UUID ...

  2. FFT（快速傅里叶变换）：UVAoj 12298 - Super Poker II

    题目:就是现在有一堆扑克里面的牌有无数张, 每种合数的牌有4中不同花色各一张(0, 1都不是合数), 没有质数或者大小是0或者1的牌现在这堆牌中缺失了其中的 c 张牌, 告诉你a, b, c接下来c张 ...

  3. 数学(欧拉函数)：UVAOJ 11426 GCD - Extreme (II)

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAQ4CAIAAABnsVYUAAAgAElEQVR4nOzdPW7zvII/bG1gCi9gKq ...

  4. 高效算法——Most financial institutions 贪心 H

    H - 贪心 Crawling in process... Crawling failed Time Limit:3000MS     Memory Limit:0KB     64bit IO Fo ...

  5. kickstrt脚本for cobbler基于system-config-kickstart配置

    1,由于是基于图形界面来生成ks自动安装脚本,所有图形生成ks脚本的服务器首先需要的就是有X Window System; 要是虚机的可以配个tigervnc-servere来进行操作 不说了直接上命 ...

  6. B - Frogger

    题目大意: 一个叫做弗雷迪的青蛙坐在湖中间的一块石头上.突然他注意到他的青蛙女神菲奥娜坐在另一块石头上面,于是他计划去看她,但是呢湖里面的水很脏并且充满了游客的防晒霜,所以他想避免游泳而采用跳跃的方式 ...

  7. Java中实例方法，实例变量，静态方法，静态变量，final方法重写的问题，覆盖

    Java中只有非私有的实例方法能被重写,即实现多态,子类可以覆盖父类的方法,但是实例变量不能覆盖,若子类和父类均定义了同样名称的变量,则对于子类来说这是两个不同的变量,要想调用父类的变量必须显示去调用 ...

  8. java中的String.format使用

         format(String  format, Objece...  argues)函数相当于C语言中的printf函数,但是相对来说更灵活.      和C中的printf函数差不多,在fo ...

  9. mysql 加入�列，改动列，删除列。

    MySQL 加入�列,改动列,删除列 ALTER TABLE:加入�,改动,删除表的列,约束等表的定义. 查看列:desc 表名; 改动表名:alter table t_book rename to ...

  10. Eclipse连接SVN服务器

    (1)安装 eclipse SVN 插件      插件名称 site-1.4.8.zip      Help --> SoftwareUpdates --->Find and Insta ...