Jquery&JS简单选项卡

结果，如图

为了明显，用绿色+红色

第一步：静态布局

先写html代码和css样式

要点一： ul li都为块级元素，可以用height，但是里面字体不居中，我们用line-height，即达到居中，又设定行高。

要点二：ul的高度与要显示的选项li的高度相等，因为li要把ul的底边掩盖掉。其他不显示的li的行高设置ul的高度-1，留出1个像素的底边显示。

    <style type="text/css">

    *{margin:0; padding:0; font:12px/1.5 arial;}

    li{list-style:none;}

    .wrap{width:800px; margin:20px auto;}

    .hide{display:none;}

    #tab-title{height:25px;border-bottom:1px solid #ccc; background:red;}/*#ccc*/

    #tab-title li{line-height:24px; float:left; width:80px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:green; cursor:pointer}/*#f5f5f5; */

    #tab-title .active{ line-height:25px;background:#fff;}

    #tab-content{border:1px solid #ccc; border-top:none; padding:20px;}

    </style>

<body>

    <div class="wrap">

        <ul id="tab-title">

            <li class="active">选项1</li>

            <li>选项2</li>

            <li>选项3</li>

            <li>选项4</li>

        </ul>

        <div id="tab-content">

            <div>

                内容1</div>

            <div class="hide">

                内容2</div>

            <div class="hide">

                内容3</div>

            <div class="hide">

                内容4</div>

        </div>

    </div>

</body>

　第二步：切换

要点一，页面加载时，给选项卡加一个额外的“索引”属性并赋值，以做选项卡和内容的对应。方法是.index=值。

要点二，点击选项时，利用jQuery链式编程，选项：去掉所有li的的active类样式，再为点击的li加上active类样式。内容：所有div加上hide类样式，再为点击的div去掉hide类样式。

    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            var tabtitleEle, tabContentEle;

            tabtitleEle = $("#tab-title li");

            tabContentEle = $("#tab-content div");

            for (var i = 0; i < tabtitleEle.length; i++) {

                tabtitleEle[i].index = i;//加上一个属性

                tabtitleEle.eq(i).click(function () {

                    tabtitleEle.removeClass("active").eq(this.index).addClass("active");

                  //alert(this.index);

                    tabContentEle.addClass("hide").eq(this.index).removeClass("hide");

                })

            }

        })

    </script>

　纯js的写法

        window.onload = function () {

            var tab_t = document.getElementById("tab-title");

            var tab_t_li = tab_t.getElementsByTagName("li");

            var tab_c = document.getElementById("tab-content");

            var tab_c_li = tab_c.getElementsByTagName("div");

            var len = tab_t_li.length;

            var i = 0;

            for (i = 0; i < len; i++) {

                tab_t_li[i].index = i;

                tab_t_li[i].onclick = function () {

                    for (i = 0; i < len; i++) {

                        tab_t_li[i].className = '';

                        tab_c_li[i].className = 'hide';

                    }

                    tab_t_li[this.index].className = 'active';

                    tab_c_li[this.index].className = '';

                }

            }

        }

　全部代码

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

    *{margin:0; padding:0; font:12px/1.5 arial;}

    li{list-style:none;}

    .wrap{width:800px; margin:20px auto;}

    .hide{display:none;}

    #tab-title{height:25px;border-bottom:1px solid #ccc; background:red;}/*#ccc*/

    #tab-title li{line-height:24px; float:left; width:80px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:green; cursor:pointer}/*#f5f5f5; */

    #tab-title .active{ line-height:25px;background:#fff;}

    #tab-content{border:1px solid #ccc; border-top:none; padding:20px;}

    </style>

    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            var tabtitleEle, tabContentEle;

            tabtitleEle = $("#tab-title li");

            tabContentEle = $("#tab-content div");

            for (var i = 0; i < tabtitleEle.length; i++) {

                tabtitleEle[i].index = i;//加上一个属性

                tabtitleEle.eq(i).click(function () {

                    tabtitleEle.removeClass("active").eq(this.index).addClass("active");

                  //alert(this.index);

                    tabContentEle.addClass("hide").eq(this.index).removeClass("hide");

                })

            }

        })

    </script>

    <!--<script>

        window.onload = function () {

            var tab_t = document.getElementById("tab-title");

            var tab_t_li = tab_t.getElementsByTagName("li");

            var tab_c = document.getElementById("tab-content");

            var tab_c_li = tab_c.getElementsByTagName("div");

            var len = tab_t_li.length;

            var i = 0;

            for (i = 0; i < len; i++) {

                tab_t_li[i].index = i;

                tab_t_li[i].onclick = function () {

                    for (i = 0; i < len; i++) {

                        tab_t_li[i].className = '';

                        tab_c_li[i].className = 'hide';

                    }

                    tab_t_li[this.index].className = 'active';

                    tab_c_li[this.index].className = '';

                }

            }

        }

    </script>-->

</head>

<body>

    <div class="wrap">

        <ul id="tab-title">

            <li class="active">选项1</li>

            <li>选项2</li>

            <li>选项3</li>

            <li>选项4</li>

        </ul>

        <div id="tab-content">

            <div>

                内容1</div>

            <div class="hide">

                内容2</div>

            <div class="hide">

                内容3</div>

            <div class="hide">

                内容4</div>

        </div>

    </div>

</body>

</html>

Jquery&JS简单选项卡的更多相关文章

Jquery实现简单选项卡
<html> <head> <meta charset="UTF-8"> <title>选项卡</title> < ...
jQuery实例-简单选项卡-【一些常见方法（2）-练习】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
js和jquery实现简单的选项卡
选项卡切换在做网页的时候经常会用到,以往都是用JQ来实现,代码简单易懂,今天用原生的js实现了一下,二者还是有很大不同的,可以对比一下代码来研究一下. <!DOCTYPE html> &l ...
[js高手之路]jquery插件开发实战-选项卡详解
在jquery中,插件开发常见的有: 一种是为$函数本身扩展一个方法,这种是静态扩展(也叫类扩展),这种插件一般是工具方法, 还有一种是扩展在原型对象$.fn上面的,开发出来的插件是用在dom元素上面 ...
js进阶 11-24 jquery如何实现选项卡的制作
js进阶 11-24 jquery如何实现选项卡的制作一.总结一句话总结:ul>li做选项卡的选项卡头,多个div做选项卡的内容,点到对应的li,就切换到对应的div,用index()获取l ...
jQuery.template.js 简单使用
之前看了一篇文章<我们为什么要尝试前后端分离>,深有同感,并有了下面的评论: 我最近也和前端同事在讨论这个问题,比如有时候前端写好页面给后端了,然后后端把这些页面拆分成很多的 views, ...
js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .
js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...
jQuery懒加载插件 – jquery.lazyload.js简单调用
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
jQuery实现TAB选项卡切换特效简单演示
本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

随机推荐

【好用的小技巧】win8兼容、网页不让复制
1.今天下了个matlab7,我用的是win8系统,不兼容. 解决:鼠标右键matlab7的快捷键,点击属性,选择兼容性,选择window vista即可运行 2.在一个网页上看到一个对自己很有帮助 ...
ionic添加admob广告教程
1.在你的ionic项目中使用如下命令添加admob插件: cordova plugin add cordova-plugin-admobpro 2.添加完成后,在$ionicPlatform.rea ...
[Java] Java 打包成jar包和解压jar包
解压jar包 jar xf xxx.jar 打包成jar包方法一:通过jar命令 jar命令的用法: 下面是jar命令的帮助说明: 用法:jar {ctxui}[vfm0Me] [jar-file] ...
struts标签--logic总结
1. logic:empty 该标签是用来判断是否为空的.如果为空,该标签体中嵌入的内容就会被处理.该标签用于以下情况: 1)当Java对象为null时: 2)当String对象为"&quo ...
泥泞的道路(codevs 1183)
题目描述 Description CS有n个小区,并且任意小区之间都有两条单向道路(a到b,b到a)相连.因为最近下了很多暴雨,很多道路都被淹了,不同的道路泥泞程度不同.小A经过对近期天气和地形的科学 ...
Cookie的使用与实现记住用户名案例
学习web开发,使用Cookie是不可避免的,个人感觉Cookie的使用和ASP.NET中的Session非常像,只不过Cookie是保存在客户端,而Session是在服务器端,两者都以记录信息为目的 ...
linux编译中的常见问题
转linux编译中的常见问题错误提示:Makefile:2: *** 遗漏分隔符 . 停止. 原因makefile中 gcc语句前缺少一个 tab分割符错误提示: bash: ./makefil ...
Windows环境下配置Vim为Python的IDE
(一)安装Python 2.7 在官网下载Python,并安装,我的安装路径是D:\Program Files\Python.安装完成后编辑环境变量Path,在其后添加;D:\Program File ...
C#对XML进行操作（添加、修改）
XML文档内容如下: <?xml version="1.0" encoding="utf-8"?> <root> <first i ...
面向服务的体系结构(SOA)——（1）目标与核心概念
什么是SOA? 常常听到人们拿OOP和SOA一起来说事,诸如SOA是否可以代替面向对象(OOP)或者两者比哪个更加有优势?直接回答有难度举个例子可能显得答案更容易理解.小孩子问你该认真写作业呢?还是高 ...

Jquery&JS简单选项卡

结果，如图

第一步：静态布局

第二步：切换

纯js的写法

全部代码

Jquery&JS简单选项卡的更多相关文章

随机推荐

热门专题

　第二步：切换

　纯js的写法

　全部代码