<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>网页选项卡应用</title>

    <script src="jquery-2.1.0.js"></script>

    <style type="text/css">

        body {

            font-size:13px;

        }

        ul, li {

            margin :0;

            padding:0;

            list-style:none;

        }

        #menu li{

            text-align:center;

            float:left;

            padding:5px;

            margin-right:2px;

            width:50px;

            cursor:pointer;

        }

            #menu li .tabFocus {

                width:50px;

                font-weight:bold;

                background-color:#f3f2e7;

                border:1px solid #666;

                border-bottom:0;

                z-index:100;

                position:relative;

            }

        #content {

            width: 260px;

            height: 90px;

            padding: 10px;

            background-color: #00ff21;

            clear: left;

            border: 1px solid #666;

            position: relative;

            top:-1px;

        }

            #content li {

                display:none;

            }

                #content li .conFocus {display:block;

                }

    </style>

    <script type="text/javascript">

        $(function () {

            $("#menu li").each(function (index) {

                $(this).click(function () {

                    $("#menu li .tabFocus").removeClass("tabFocus");

                    $("#content li:eq(" + index + ")").show().siblings().hide();

                })

            })

        })

    </script>

</head>

<body>

    <ul id="menu">

        <li class="tabFocus">家具</li>

        <li>电器</li>

        <li>二手</li>

    </ul>

    <ul id="content">

        <li class="conFocus">我是家具的内容</li>

        <li>欢迎来到电器城</li>

        <li>二手市场，产品丰富多彩</li>

    </ul>

</body>

</html>

Jquery网页选项卡应用的更多相关文章

  1. JQuery 网页选项卡制作

    网页选项卡可以较好的利用有限的页面来展示更多的元素,而使用JQuery来制作网页选项卡也是一件非常简单的事情.今天就来分享一个网页选项卡的制作小技巧. 引入所需库 选项卡原理 业务核心 完整小例子 引 ...

  2. jquery实现的网页选项卡(拾忆)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jQuery Tab选项卡切换代码

    jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...

  4. jquery Tabs选项卡切换

    效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  5. 使用jquery实现选项卡切换效果

    几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...

  6. jquery制作选项卡

    思路:点击按钮后,先让所有的按钮的class属性都为“”,所有的div的display样式都为none:再让当前被点击按钮的class属性为active,以及所对应的div的display样式为blo ...

  7. jQuery的选项卡

    jQuery的选项卡 下面请看代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  8. jquery实现网页选项卡

    这个功能在现在的网站中使用较为普遍,就是以选项卡的形式来对一些内容做了分类.,比如下面的天猫商城. 下面的源码是仿照天猫写的一个选项卡,实现起来的效果如下. 主要是利用我们在点击相应板块是触发它的单击 ...

  9. jQuery应用操作之---网页选项卡(tabs)

    示例: <div class="tab"> <div class="tab_menu"> <ul> <li class ...

随机推荐

  1. sql 删除两条完全相同的记录

    delete a from ( select *,ps=row_number()over(PARTITION by cCaption  order by getdate()) from AA_Colu ...

  2. 安装apache服务器时遇到只能本地访问，局域网内其他电脑不能访问apache：

    安装apache服务器时遇到只能本地访问,局域网内其他电脑不能访问apache:1.查看selinux运行状态及关闭selinux/usr/sbin/sestatus -v文本模式关闭selinux: ...

  3. [TYVJ] P1238 路径

    路径 描述 Description 图是由一组顶点和一组边组成的.一条边连接两个顶点.例如,图1表示了一个有4个顶点V.5条边的图.图中,每条边e是有方向的,方向从起点到终点,并且每条边都有价值.用整 ...

  4. cf B. Vasily the Bear and Fly

    http://codeforces.com/contest/336/problem/B #include <cstdio> #include <cstring> #includ ...

  5. 《Programming WPF》翻译 第9章 1.自定义控件基础

    原文:<Programming WPF>翻译 第9章 1.自定义控件基础 在写一个自定义控件之前,你需要问的第一个问题是,我真的需要一个自定义控件吗?一个写自定义控件的主要原因是为了用户界 ...

  6. 把C#程序（含多个Dll）合并打包成单一文件

    实现的方式有多种. 1 Mono 项目中有一个工具,mono的一个附属工具mkbundle.(在Xamarin未被收购开源前,它是加密的商业软件.http://www.cnblogs.com/bins ...

  7. C语言中的声明解析规则——数组，指针与函数

    摘要:C语言的申明存在的最大问题是:你无法以一种人们所习惯的自然方式和从左向右阅读一个声明,在引入voliatile和const关键字以后,情况更加糟糕了.由于这些关键字只能出现在声明中,是的声明形式 ...

  8. 简单实用后台任务执行框架（Struts2+Spring+AJAX前端web界面可以获取进度）

    使用场景: 在平常web开发过程中,有时操作员要做一个后台会运行很长时间的任务(如上传一个大文件到后台处理),而此时前台页面仍需要给用户及时的进度信息反馈,同时还要避免前台页面超时. 框架介绍: 本架 ...

  9. Jquery的bootstrap在线文本编辑器插件Summernote

    http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...

  10. linux中的文件结构

    linux下的文件结构,看看每个文件夹都是干吗用的 /bin 二进制可执行命令 /dev 设备特殊文件 /etc 系统管理和配置文件 /etc/rc.d 启动的配置文件和脚本 /home 用户主目录的 ...