用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(选项卡)组件的使用方 ...
随机推荐
- 【转】Android与JNI(二) -- 不错
原文网址:http://www.cnblogs.com/eddy-he/archive/2012/08/09/2629974.html 软件版本: ubuntu10.04 java version & ...
- Xmanager4使用记录
想在windows下远程登录到了Linux桌面,但又不想装vnc server,况且根据同学的实践,vnc的桌面在远程和本地都能看得到,这个似乎不太好. google到xmanager,装了个测试 ...
- 吐血原创:mini2440和win7笔记本利用无路由功能的交换机共享上网(使用x-router软路由)
真的是要吐血了,为了使自己的win7系统笔记本和mini2440,通过交换机(没有路由功能,才5口,和HUB差不多)共享宽带上网,并且连接上的宽带还是长城宽带,我用尽各种cmd命令都查不到长城宽带的默 ...
- 数据结构——N皇后放置方法种数
Description 在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上. 你的任务是,对于给定的N,求出有多少种合 ...
- C++中的类和对象(一)
一,类的概念及封装 1.什么是封装 第一层含义:封装是面向对象程序设计最基本的特性.把数据(属性)和函数(方法)合成一个整体,这在计算机世界中是用类和对象实现的.(把属性和方法进行封装) 第二层含义: ...
- 第七讲:HTML5中的canvas两个小球全然弹性碰撞
<html> <head> <title>小球之间的碰撞(全然弹性碰撞)</title> <script src="../js/jsce ...
- Android开发系列(一)Activity与Fragment获取屏幕获取屏幕像素的不同方式
Activity中常用的获取屏幕像素代码: //获取屏幕像素相关信息 DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getD ...
- HDU 3037(Lucas定理)
对于很大的组合数不能用C(n, m) = C(n - 1, m) + C(n-1, m -1)来求,这里就用到Lucas定理. 模板题: hdu3037:模板如下: #include <cstd ...
- 中国剩余定理模板poj1006
#include <cstdio> #include <iostream> #include <cstring> #include <cmath> #i ...
- sql server 各种函数
SQL2008 表达式:是常量.变量.列或函数等与运算符的任意组合. 1. 字符串函数 函数 名称 参数 示例 说明 ascii(字符串表达式) select ascii('abc') 返回 97 返 ...