文档章节

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
粉丝 34
博文 141
码字总数 46256
作品 0
朝阳
前端工程师
私信 提问
30 个实用的 jQuery 选项卡/导航教程推荐

很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果。本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助。 1. Animated Tabbed Conte...

小编辑
2011/11/18
5K
5
4月份本周超过 10 款最新免费 jQuery 插件

这里我们收集了超过 10 个最新的免费 jQuery 插件,这是我们在 10/04/2015 to 16/04/2015 这段时间内从网上找到的。尽管这些插件我们还没有推荐,但或许对你有用。 Jquery Image Player 外观...

oschina
2015/04/24
4.7K
9
15 个 jQuery 的 Tabs 窗体插件

在网站开发中, Tabs 组件常用于导航菜单、不同类别内容的切换等等功能上,oschina 收录了一些不错的 Tabs 插件,此外再推荐 15 款 jQuery 的 Tabs 插件。 1) Sweet Ajax Tab 2) Slilck Tabb...

红薯
2011/08/29
24.4K
2
20 个最棒的 jQuery Tab 插件

jQuery Tab 常用来做网页上的选项设置界面和导航,本文向你推荐最棒的 20 个 jQuery Tab 插件。 Enjoy !! 1. Slider Tabs SliderTabs 是一个可定制的 jQuery 插件,可以创建基于 Tab 的内容滑...

oschina
2015/01/03
29.6K
8
10 款提高开发效率的 jQuery/CSS3 组件

前端开发是一项十分繁琐而又耗体力的工作,如何更有效率的开发我们的应用,很多人会选择适当地使用一些jQuery插件。今天就要给大家分享10款可以提高开发效率的jQuery/CSS3组件。部分插件可以...

yykj
2013/10/29
539
2

没有更多内容

加载失败,请刷新页面

加载更多

深入理解JVM—JVM内存模型

深入理解JVM—JVM内存模型 我们知道,计算机CPU和内存的交互是最频繁的,内存是我们的高速缓存区,用户磁盘和CPU的交互,而CPU运转速度越来越快,磁盘远远跟不上CPU的读写速度,才设计了内存...

onedotdot
25分钟前
1
0
MVC、MVCS、MVVM、MVP、VIPER等这么多架构模式哪一个好呢?

在项目开启阶段,其中一个很重要的环节就是选架构。 那么面对目前已知的这么多架构模式我们该怎么选择呢?这确实是个很让人头疼的问题! 下面我就在这里梳理一下目前常见的一些架构模式。 先...

Java干货分享
今天
3
0
简单模仿配置文件的反射机制

//Student类 public class Student { public void love() { System.out.println("python"); } } //Tesy类 public class Tesy { public static void main(String[] args) throws Exceptio......

南桥北木
今天
2
0
你真的需要了解一下CSS变量 var()的用法

当Web项目变得越来越大时,他的CSS会变得像天文数字那么大而且还变得混乱。为了帮助我们解决这个问题,新的CSS变量很快就会出现在主流浏览器中,它让开发人员能够重用并轻松编辑重复出现的C...

前端小攻略
今天
1
0
嵌入式应用选择合适的微控制器

为嵌入式应用选择微控制器有几个原因,即低成本,高集成度,增加可靠性,节省空间等。 准备所需硬件接口列表使用微控制器的基本硬件框图,准备一份微控制器需要支持的所有外设接口的列表。微...

linux-tao
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部