tab页签
<div class="fl" id="newsBox">
<div class="tab1 grayBar">
<ul id="newsNav">
<li class="tab1_1 selected" index="0">
<h2>
<a href="WebPage/NewsList.aspx?CategoryID=221" target="_blank" title="更多">公告栏</a></h2>
</li>
<li class="tab1_2" index="1">
<h2>
<a href="WebPage/Scene.aspx" target="_blank" title="点击显示更多招聘会信息">招聘会</a></h2>
</li>
<li class="tab1_3" index="2">
<h2>
<a href="http://www.gxrcpx.com/" target="_blank">就业培训</a></h2>
</li>
<li class="tab1_4" index="3">
<h2>
<a href="http://sydw.gxrc.com" target="_blank" title="更多">事业单位</a></h2>
</li>
<li class="tab1_5" index="4">
<h2>地市动态</h2>
</li>
</ul>
</div>
<div id="NewsArea-content" class="cl base_border">
<div class="newsList">
</div>
<div class="newsList undis">
</div>
<div class="newsList undis">
</div>
<div class="newsList undis">
</div>
<div class="newsList undis">
</div>
<div class="newsList undis" style="display:none;">
</div>
</div>
</div>
//页签
function Tabs(tabNav, tabContent, selClass) {
var index = 0;
var tabContents = $("#" + tabContent + " > div");
var tabNavs = $("#" + tabNav + " li");
tabNavs.each(function () {
var $this = $(this);
$this.attr("index", index);
index++;
}).mouseover(function () {
var $this = $(this);
tabContents.hide();
tabNavs.removeClass(selClass);
$this.addClass(selClass);
tabContents.eq(parseInt($this.attr("index"))).show();
});
}
Tabs("newsNav", "NewsArea-content", "selected");
tab页签的更多相关文章
- 使用原生js与jQuery分别实现一个简单的tab页签
tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括 ...
- Tab页签切换
js之tab页签切换效果 现在web网站,很多地都需要用到tab页签. 示例: $(document).ready(function(){ va ...
- 用于实现tab页签切换页面的angular路由复用策略
使用场景 打开菜单页面的时候,出现对应页面的页签.切换页签,原来的页面信息状态保留,关闭页签则保留的信息删除.使用路由复用策略,保存路由快照.实现效果如图所示 实现过程 概述: 1.在app.modu ...
- bootStrap中Tab页签切换
关于$().tab()一般用来实现标签页和胶囊链接内容片段的切换,或是相关内容的页面导航: <ul class="nav nav-tabs" id="myTab&q ...
- ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- 值得分享的Bootstrap Ace模板实现菜单和Tab页效果(转)
Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...
- Activity“ 阻止自动弹出软键盘”的方法 -尤其是对于Tab页下的!
我的activity是Tab页签下的~! 所以应把代码加在继承于TabActivity的那个activity中!!而不是由点击Tab页启动的那个activity <activity androi ...
- JavaScript选项卡/页签/Tab的实现
选项卡,也称页签,英文用Tab(Module-Tabs)表示.Tab将不同的内容重叠放在一个布局块内,重叠的内容区里每次只有其中一个是可见的. Tab可以在相同的空间里展示更多的信息,它把相似的主题分 ...
- EBS OAF开发中怎样实现功能页签(Global Tab)
EBS OAF开发中怎样实现功能页签(Global Tab) (版权声明.本人原创或者翻译的文章如需转载.如转载用于个人学习,请注明出处.否则请与本人联系,违者必究) 功能页签的实现不须要不论什么编码 ...
随机推荐
- yum -y install 问题解决
1.错误如下: Last login: Thu Jul 26 09:04:14 2018 from 192.168.3.250[root@diagbot01 ~]# yum -y install do ...
- 后缀数组 TYVJ P1860 后缀数组
/*P1860 后缀数组时间: 1000ms / 空间: 131072KiB / Java类名: Main描述 我们定义一个字符串的后缀suffix(i)表示从s[i]到s[length(s)]这段子 ...
- Java基础系列 - try...catch...finally
package com.test6; import java.io.FileReader; import java.io.IOException; /** * try...catch...finall ...
- 使用tmate快速分享你的终端会话
tmate 的意思是 teammates,它是 tmux 的一个分支,并且使用相同的配置信息(例如快捷键配置,配色方案等).它是一个终端多路复用器,同时具有即时分享终端的能力.它允许在单个屏幕中创建并 ...
- BZOJ1856[Scoi2010]字符串——组合数学+容斥
题目描述 lxhgww最近接到了一个生成字符串的任务,任务需要他把n个1和m个0组成字符串,但是任务还要求在组成的字符串中,在任意的前k个字符中,1的个数不能少于0的个数.现在lxhgww想要知道满足 ...
- vue点击父组件里面的列表动态传值到子组件
<template> <div> 爸爸 <div style="background-color:yellow;margin-top:10px" v- ...
- Arts打卡第7周
Algorithm.主要是为了编程训练和学习. 每周至少做一个 leetcode 的算法题(先从Easy开始,然后再Medium,最后才Hard). 进行编程训练,如果不训练你看再多的算法书,你依然不 ...
- 面试题小议---BY gremount
Problem 1: 两个烧杯,一个放糖一个放盐,用勺子舀一勺糖到盐,搅拌均匀,然后舀一勺混合物会放糖的烧杯,问你两个烧杯哪个杂质多? 提示:相同.(1)可以用一个特殊数据计算一下,可以得到两个烧杯 ...
- 《Glibc内存管理》笔记DAY2
目录 Ptmalloc内存管理设计 Main_arena 与 non_main_arena chunk 的组织 空闲 chunk 容器 sbrk 与 mmap 内存分配概述 内存回收概述 边界标记法 ...
- CentOS 7 安装MySQL8
安装 下载Linux对应的MySQL https://dev.mysql.com/downloads/mysql/ CentOS选择Red Hat Enterprise Linux 在/usr/loc ...