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) (版权声明.本人原创或者翻译的文章如需转载.如转载用于个人学习,请注明出处.否则请与本人联系,违者必究) 功能页签的实现不须要不论什么编码 ...
随机推荐
- 搭建gitlab服务
安装依赖 sudo yum install curl policycoreutils openssh-server openssh-clients sudo systemctl enable sshd ...
- datax 从mysql到mysql
需求:把a服务器上mysql数据迁移到b服务器上mysql中. 1.下载datax: https://github.com/alibaba/DataX 2.解压tar -zxvf datax.tar ...
- MySQL 事务 MVCC 版本链
版本链 对于使用InnoDB存储引擎的表来说,它的聚簇索引记录中都包含两个必要的隐藏列(row_id并不是必要的,我们创建的表中有主键或者非NULL唯一键时都不会包含row_id列): 1) ...
- promise 及 setTimeout 执行顺序
setTimeout(function() { console.log(1); }, 0); new Promise(function(res, rej) { res(2); console.log( ...
- 【原创】go语言学习(十三)struct介绍2
目录: 方法的定义 函数和方法的区别 值类型和指针类型 面向对象和继承 结构体和json序列化 方法的定义 1.和其他语言不一样,Go的方法采⽤用另外一种方式实现. package main impo ...
- HTTP状态码和支持的方法
1. HTTP常用状态码 200 ok 客户端请求成功 400 bad request 客户端请求有语法错误,不能被服务器所理解 401 unauthorized 请求要求身份验证,对于登录后请求 ...
- c++ 珊格画椭圆
#ifndef _TEST_H #define _TEST_H #include <iostream> #include <math.h> using namespace st ...
- C# 下划线转驼峰
/// <summary> /// 转换 /// </summary> /// <param name="sender"></param& ...
- Java基础系列 - 抽象类继承和接口实现
package com.inter; /** * 继承和接口的关系,单继承,多接口 * java不支持多继承,但可通过接口实现多重继承 */ public class test2 { public s ...
- js 根据滚动条加载数据
很久没记笔记了,最近搞起web开发了 <html> <head> <script src="http://code.jquery.com/jquery-1.7. ...