文档章节

TAB(JQUERY)

0000001
 0000001
发布于 2014/06/11 16:19
字数 283
阅读 35
收藏 1

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>tab</title>

<script src="jquery.js" type="text/javascript"></script>

<style type="text/css">

body{ font:12px/1.5 Verdana,Geneva,Arial,Helvetica,sans-serif;}

body,h1,h2,h3,h4,h5,h6,hr,p,dl,th,dt,dd,ul,ol,li,form,fieldset,legend,button,input,textarea{ outline:medium none; padding:0;margin:0; }

ul,ol{ list-style:none; }

a{ text-decoration:none; }

img{ border:none; display:block; }

em,i{ font-style:normal;}

s{ display:inline-block; overflow: hidden; }

input{ vertical-align:middle; }

h2,h3,h4,h5{ font-size:14px;}

.tabs-box

{

    /*导航容器定义*/

    width:500px; height:300px; 

}

.tabs li

{

    /*默认标签样式*/

    float:left; width:100px; height:24px; line-height:24px; 

}

.tabs li.selected

{

    /*激活的标签样式*/

    background:#f00; 

}

.tabs-panel

{

    /*默认的显示区域样式*/

   display:none; width:300px; height:200px; border:1px solid #ccc; backgrond:#fff; 

}

.tabs-show

{

    display: block;

}

</style>


<script type="text/javascript">

$(function() {

        $(".tabs").find("li").mouseover(function(e) {

            if (e.target == this) {

                var tabs = $(this).parent().children("li");

                var panels = $(this).parent().parent().children("div");

                var index = $.inArray(this, tabs);

                if (panels.eq(index)[0]) {

                    tabs.removeClass("selected")

                        .eq(index).addClass("selected");

                    panels.removeClass("tabs-show")

                        .eq(index).addClass("tabs-show");

                }

            }

        });

    });

</script>

</head>

<body>

<div>

<ul>

<li>

论坛新帖

</li>

<li>

最新博文

</li>

<li>

最新

</li>

</ul>

<div class="tabs-panel tabs-show">

--111这里调用最新论坛文章--

</div>

<div>

--2222这里调用最新博客文章-

</div>

<div>

-3333-这里调用最新论坛文章--

</div>

</div>

</body>

</html>


© 著作权归作者所有

共有 人打赏支持
0000001
粉丝 35
博文 141
码字总数 46256
作品 0
朝阳
前端工程师
使用sublime text 2开发Javacript和jQuery

来源:GBin1.com 经常听见大家抱怨javascript开发没有好的IDE,当然我也同意。但是如果你尝试sublime text 2后估计你可能改变这个观点。 下载地址:http://www.sublimetext.com/download 主要...

gbin1
2011/11/09
0
0
20个最有创意最实用的jQuery应用

我们看看三年来,这个被成为最优雅的Javascript框架带来那些创意应用。 以下翻译自国外网站,示例网站如无法点击访问,请自觉翻墙~ 原文链接:http://nettuts.com/articles/web-roundups/th...

晨曦之光
2012/03/09
0
0
JS杂谈系列-jquery-插件开发小记

//=======================start(function ($) {//扩展 必须$.fn.extend({ //插件名称 必须colh: function (options) {//默认参数 (放在插件外面,避免每次调用插件都调用一次,节省内存)va...

透笔度
2015/08/04
0
1
240多个jQuery插件(2)

表格等(Tables, Grids etc.) UI/Tablesorter. jQuery ingrid. jQuery Grid Plugin. Table Filter - awesome!. TableEditor. jQuery Tree Tables. Expandable “Detail” Table Rows. Sortab......

五味格子
2011/05/11
0
0
easyui为tab添加遮罩层

项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程。tab控件又没有显示遮罩的设置(至少本菜是没有找到), Google了一下,根据另一个兄台写的方法,拿来改造...

文文1
2015/08/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

你为什么在Redis里读到了本应过期的数据

一个事故的故事 晚上睡的正香突然被电话吵醒,对面是开发焦急的声音:我们的程序在访问redis的时候读到了本应过期的key导致整个业务逻辑出了问题,需要马上解决。 看到这里你可能会想:这是不...

IT--小哥
今天
2
0
祝大家节日快乐,阖家幸福! centos GnuTLS 漏洞

yum update -y gnutls 修复了GnuTLS 漏洞。更新到最新 gnutls.x86_64 0:2.12.23-22.el6 版本

yizhichao
昨天
5
0
Scrapy 1.5.0之选择器

构造选择器 Scrapy选择器是通过文本(Text)或 TextResponse 对象构造的 Selector 类的实例。 它根据输入类型自动选择最佳的解析规则(XML vs HTML): >>> from scrapy.selector import Sele...

Eappo_Geng
昨天
4
0
Windows下Git多账号配置,同一电脑多个ssh-key的管理

Windows下Git多账号配置,同一电脑多个ssh-key的管理   这一篇文章是对上一篇文章《Git-TortoiseGit完整配置流程》的拓展,所以需要对上一篇文章有所了解,当然直接往下看也可以,其中也有...

morpheusWB
昨天
5
0
中秋快乐!!!

HiBlock
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部