文档章节

TAB(JQUERY)

0000001
 0000001
发布于 2014/06/11 16:19
字数 283
阅读 36
收藏 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>


© 著作权归作者所有

共有 人打赏支持
下一篇: css hack
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
easyui为tab添加遮罩层

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

文文1
2015/08/03
0
0
JS杂谈系列-jquery-插件开发小记

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

透笔度
2015/08/04
0
1
[转]240多个jQuery插件

Query 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的,它兼容 CSS3,还兼容各种...

inferrrrrr
2010/05/11
0
4
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

没有更多内容

加载失败,请刷新页面

加载更多

Java 源代码和 C 源代码的运行区别

与其他程序的执行方式和编译方式不同。 Java 源代码需要进行编译成字节码后在 Java 虚拟机上运行,这样 Java 程序能够保持独立性和跨平台功特性。 请参考下图。 https://www.cwiki.us/pages...

honeymose
今天
4
0
Apache限定目录解析PHP,限制user_agent,PHP相关的配置

Apache限定目录解析PHP 配置前访问upload/index.php [root@test-a ~]# curl -x192.168.77.139:80 'www.test.com/upload/index.php'This is upload diretory 配置,/usr/local/apache2.4/......

野雪球
今天
5
0
java.util.Concurrent.Exchanger源码

类图 源码: package java.util.concurrent;import java.util.concurrent.atomic.AtomicInteger;import java.util.concurrent.atomic.AtomicReference;import java.util.concurrent......

狼王黄师傅
今天
6
0
Kubernetes里的secret最基本的用法

Secret解决了密码、token、密钥等敏感数据的配置问题,使用Secret可以避免把这些敏感数据以明文的形式暴露到镜像或者Pod Spec中。 Secret可以以Volume或者环境变量的方式使用。 使用如下命令...

JerryWang_SAP
昨天
5
0
2018-11-20学习笔记

1. python数据类型: 给变量赋值什么样的值,变量就是什么样的类型 给变量赋值整数,变量就是整数类型 给变量赋值字符串,变量就是字符串类型 123 和“123”一样吗? 在python中 单引号 与双...

laoba
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部