【锋利的JQuery-学习笔记】Tab选项卡的实现
效果图:
关键点:
1.标签和标签内容都是用<ul><li>实现的,主要是通过Css样式设计成选项卡的模样。
2.用js代码实现点击标签时,标签内容的切换(做法是<div id="jnBrandList">横向滚动)。
html:
<div id="jnBrand">
<div id="jnBrandTab">
<h2 title="品牌活动">品牌活动</h2>
<ul>
<li><a title="运动" href="#nogo">运动</a></li>
<li><a title="女鞋" href="#nogo">女鞋</a></li>
<li><a title="男鞋" href="#nogo">男鞋</a></li>
<li><a title="Applife" href="#nogo">童鞋</a></li>
</ul>
</div>
<div id="jnBrandContent">
<div id="jnBrandList">
<ul>
<li>
<a href="###1" class="JS_live"><img alt="耐克" src="data:images/upload/20120217.jpg" /></a>
<span><a href="###1">耐克</a></span>
</li>
<li>
<a href="###2" class="JS_live"><img alt="阿迪达斯" src="data:images/upload/20120218.jpg" /></a>
<span><a href="###2">阿迪达斯</a></span>
</li>
<li>
<a href="###3" class="JS_live"><img alt="李宁" src="data:images/upload/20120219.png" /></a>
<span><a href="###3">李宁</a></span>
</li>
<li>
<a href="###4" class="JS_live"><img alt="安踏" src="data:images/upload/20120220.png" /></a>
<span><a href="###4">安踏</a></span>
</li>
<li>
<a href="###1" class="JS_live"><img alt="耐克" src="data:images/upload/20120217.jpg" /></a>
<span><a href="###1">耐克</a></span>
</li>
<li>
<a href="###2" class="JS_live"><img alt="阿迪达斯" src="data:images/upload/20120218.jpg" /></a>
<span><a href="###2">阿迪达斯</a></span>
</li>
<li>
<a href="###3" class="JS_live"><img alt="李宁" src="data:images/upload/20120219.png" /></a>
<span><a href="###3">李宁</a></span>
</li>
<li>
<a href="###4" class="JS_live"><img alt="安踏" src="data:images/upload/20120220.png" /></a>
<span><a href="###4">安踏</a></span>
</li>
<li>
<a href="###1" class="JS_live"><img alt="耐克" src="data:images/upload/20120217.jpg" /></a>
<span><a href="###1">耐克</a></span>
</li>
<li>
<a href="###2" class="JS_live"><img alt="阿迪达斯" src="data:images/upload/20120218.jpg" /></a>
<span><a href="###2">阿迪达斯</a></span>
</li>
<li>
<a href="###3" class="JS_live"><img alt="李宁" src="data:images/upload/20120219.png" /></a>
<span><a href="###3">李宁</a></span>
</li>
<li>
<a href="###4" class="JS_live"><img alt="安踏" src="data:images/upload/20120220.png" /></a>
<span><a href="###4">安踏</a></span>
</li>
<li>
<a href="###1" class="JS_live"><img alt="耐克" src="data:images/upload/20120217.jpg" /></a>
<span><a href="###1">耐克</a></span>
</li>
<li>
<a href="###2" class="JS_live"><img alt="阿迪达斯" src="data:images/upload/20120218.jpg" /></a>
<span><a href="###2">阿迪达斯</a></span>
</li>
<li>
<a href="###3" class="JS_live"><img alt="李宁" src="data:images/upload/20120219.png" /></a>
<span><a href="###3">李宁</a></span>
</li>
<li>
<a href="###4" class="JS_live"><img alt="安踏" src="data:images/upload/20120220.png" /></a>
<span><a href="###4">安踏</a></span>
</li>
</ul>
</div>
</div>
</div>
css:
/* 品牌活动 */
#jnBrand {
float: left;
height: 230px;
margin: 10px 0 0;
overflow: hidden;
width: 790px;
}
#jnBrandTab {
border-bottom: 1px solid #E4E4E4;
height: 29px;
position: relative;
width: 790px;
float: left;
}
#jnBrandTab h2 {
height: 29px;
line-height: 29px;
left:;
position: absolute;
width: 100px;
}
#jnBrandTab ul {
position: absolute;
right:;
top: 10px;
}
#jnBrandTab li {
float: left;
margin: 0 10px 0 0;
}
#jnBrandTab li a {
background-color: #E4E4E4;
color: #000000;
display: inline-block;
height: 20px;
line-height: 20px;
padding: 0 10px;
}
#jnBrandTab .chos {
background: url("../images/chos.gif") no-repeat scroll 50% bottom transparent;
padding-bottom: 3px;
}
#jnBrandTab .chos a {
background-color: #FA5889;
color: #FFFFFF;
outline: 0 none;
}
#jnBrandContent {
float: left;
height: 188px;
overflow: hidden;
margin: 8px 5px;
width: 790px;
position: relative;
}
#jnBrandList {
position: absolute;
left:;
top:;
width: 3200px;
}
#jnBrandContent li {
float: left;
height: 188px;
overflow: hidden;
padding: 0 5px;
position: relative;
width: 185px;
}
#jnBrandContent li img {
left: 5px;
position: absolute;
top:;
}
#jnBrandContent li span {
background-color: #EFEFEF;
bottom:;
color: #666666;
display: inline-block;
font-size: 14px;
height: 24px;
line-height: 24px;
overflow: hidden;
position: absolute;
text-align: center;
width: 183px;
}
#jnBrandContent li a {
color:#666666;
}
#jnBrandContent li a:hover{
color: #008CD7;
text-decoration: none;
}
"../images/chos.gif"是:
(下载: )
js:
$(function () {
$("#jnBrandTab li a").click(function () {
$(this).parent().addClass("chos")
.siblings().removeClass("chos"); var index = $("#jnBrandTab li a").index(this);
showBrandContent(index); return false;
}).eq(0).click();
}); //父标签横向滚动,以显示不同的tab标签页(子标签)
function showBrandContent(index) {
var $rollobj = $("#jnBrandList"); /*
outerWidth(options)
获取第一个匹配元素外部宽度(默认包括补白和边框)。
此方法对可见和隐藏元素均有效。
返回值:Integer
参数:
options(Boolean) : (false) 设置为 true 时,计算边距在内。
示例:
获取第一段落外部宽度。
*/
var rollWith = $rollobj.find("li").outerWidth();
rollWith *= 4; //一个版面的宽度 $rollobj.stop(true, true)//清空所有动画和将未完成的动画抵达动画结束状态
.animate({left: -rollWith * index},600);
}
【锋利的JQuery-学习笔记】Tab选项卡的实现的更多相关文章
- 锋利的JQuery 学习笔记
第一章 认识JQuery ·页面加载事件(可以写多个ready())$(document).ready(function(){alert(“hello world”);} ...
- 锋利的jquery学习笔记
1.$("#tt")获取的永远都是一个jquery对象,所以要判断页面上是否存在某个对象不能像js中 if($("#tt")){ } 而是通过: ){ } ps ...
- 锋利的jQuery学习笔记之jQuery选择器
在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 t ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- jQuery 学习笔记:jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记(一):入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
随机推荐
- (转)RabbitMQ消息队列(六):使用主题进行消息分发
在上篇文章RabbitMQ消息队列(五):Routing 消息路由 中,我们实现了一个简单的日志系统.Consumer可以监听不同severity的log.但是,这也是它之所以叫做简单日志系统的原因, ...
- 为apache与mysql创建快捷方式
为apache与mysql创建快捷方式 1)为apache创建快捷方式(软链接) 以后我们就可以在终端的任一位置,使用apachectl start|stop|restart 2)为mysql创建 ...
- iOS Foundation框架 -2.常用集合类简单总结
Foundation框架中常用的类有:NSString.NSArray.NSSet.NSDictionary 以及它们对应的子类 NSMutableString.NSMutableArray.NSMu ...
- 【风马一族_xml】xml的两种解析思想
xml的解析思想 dom解析 将整个xml使用类似树的结构保存在内存中,再进行对其操作 是woc组织推荐的处理xml的一种方式 需要等到xml完全加载进内存才可以进行操作 耗费内存.当解析超大的xml ...
- 数列平方根的和 java
题目描述: 数列的定义如下:数列的第一项为n,以后各项为前一项的平方根,求数列的前m项的和. 输入 输入数据有多组,每组占一行,由两个整数n(n<10000)和m(m<1000)组成,n和 ...
- cadence16.3破解方法
今天安装cadence16.3,安装了两遍都失败了,百思不得其解,结果总是出现在license上,如下图所示: 后面当然就只能启动demo版了,于是网上找,参照以前古老的法子,终于解决问题! 首先,开 ...
- Android app version code and name
android:versionCode和android:versionName 区别 Android的版本可以在androidmainfest.xml中定义, 主要有android:version ...
- 批处理bat命令--获取当前盘符和当前目录和上级目录
批处理bat命令--获取当前盘符和当前目录和上级目录 批处理命令获取当前盘符和当前目录%~d0 是当前盘符%cd% 是当前目录可以用echo %cd%进行打印测试 以下例子是命令行编译Visual S ...
- 更改windows服务的配置文件app.config
/// <summary> /// 获取每次处理记录数 /// </summary> /// <returns></returns> private s ...
- C# CacheHepler Class
internal class CacheHelper { /// <summary> /// Insert value into the cache using /// appropria ...