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) (版权声明.本人原创或者翻译的文章如需转载.如转载用于个人学习,请注明出处.否则请与本人联系,违者必究) 功能页签的实现不须要不论什么编码 ...
随机推荐
- 洛谷 P1309 瑞士轮 题解
每日一题 day4 打卡 Analysis 暴力+快排(其实是归并排序) 一开始天真的以为sort能过,结果光荣TLE,由于每次只更改相邻的元素,于是善于处理随机数的快排就会浪费很多时间.于是就想到归 ...
- Chrome安装.crx文件
解决"只能通过Chrome网上应用商店安装该程序"的方法 http://chromecj.com/utilities/2015-04/423.html 1.更多工具->扩展程 ...
- 第一章 初识Linux shell
Linux 由内核.GNU.桌面环境.应用软件四部分组成 内核基本功能: (1). 管理内存 (2). 管理硬件设备 (3). 管理文件系统 (4). 管理软件程序 GNU:操作系统需要一些工具来执行 ...
- 用Python匹配HTML tag的时候,<.>和<.?>有什么区别?
答:术语叫贪婪匹配( <.> )和非贪婪匹配(<.?> ) 例如: test <.*> : test <.*?> :
- c++ 珊格画椭圆
#ifndef _TEST_H #define _TEST_H #include <iostream> #include <math.h> using namespace st ...
- 基于部标1078视频协议和苏标Adas协议构建主动安全平台
苏标本身仍然是基于部标808协议的基础上递增起草的,苏标协议是包容808协议的, 不能脱离808协议而独立存在的, 主要基于<JT/T 796 道路运输车辆卫星定位系统平台技术要求>.&l ...
- FOI冬令营 Day2
目录 T1.直径(diameter) 传送门 Code T2.定价(price) 传送门 Code T3.排序(sort) 传送门 Code T1.直径(diameter) 传送门 Code //20 ...
- dsu on tree学习笔记
前言 一次模拟赛的\(T3\):传送门 只会\(O(n^2)\)的我就\(gg\)了,并且对于题解提供的\(\text{dsu on tree}\)的做法一脸懵逼. 看网上的其他大佬写的笔记,我自己画 ...
- Ubuntu 16.04安装完重启后黑屏,光标一直闪
原文:https://blog.csdn.net/weixin_38533896/article/details/81023690 版权声明:本文为博主原创文章,转载请附上博文链接! 安装教程网址:h ...
- SQL中AVG()、COUNT()、SUM()等函数对NULL值处理
一.AVG() 求平均值 注意AVE()忽略NULL值,而不是将其作为“0”参与计算 二.COUNT() 两种用法 1.COUNT(*) 对表中行数进行计数 不管是否有NULL 2.COUNT(字段名 ...