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) (版权声明.本人原创或者翻译的文章如需转载.如转载用于个人学习,请注明出处.否则请与本人联系,违者必究) 功能页签的实现不须要不论什么编码 ...
随机推荐
- 24 | MySQL是怎么保证主备一致的?
在前面的文章中,我不止一次地和你提到了binlog,大家知道binlog可以用来归档,也可以用来做主备同步,但它的内容是什么样的呢?为什么备库执行了binlog就可以跟主库保持一致了呢?今天我就正式地 ...
- 接口实现后台GZIP压缩,pako.js 前端解压
import java.io.ByteArrayInputStream;import java.io.ByteArrayOutputStream;import java.io.IOException; ...
- AcWing P373 車的放置
Analysis 这道题是二分图匹配,设可以放車的的地方的坐标为(i,j),则连一条i到j的有向边(注意是有向边),然后再跑匈牙利算法就好了.时间复杂度是O(nm(n+m)),在1≤n,m≤200的情 ...
- 二十三.Subversion基本操作、使用Subversion协同工作、制作nginx的RPM包
1.Subversion基本操作 web1 1.1 安装Subversion服务器 ]# yum -y install subversion 1.1.1 创建版本库 ]# mkdir /var/svn ...
- CF843D Dynamic Shortest Path spfa+剪枝
考试的T3,拿暴力+剪枝卡过去了. 没想到 CF 上也能过 ~ code: #include <bits/stdc++.h> #define N 100004 #define LL lon ...
- error C4995: “wcscpy”: 名称被标记为 #pragma deprecated
1>c:\program files (x86)\microsoft visual studio\2017\professional\vc\tools\msvc\14.16.27023\atlm ...
- link cut tree 洞穴勘测
/*[bzoj2049][Sdoi2008]Cave 洞穴勘测 2014年7月30日1,06923Description 辉辉热衷于洞穴勘测.某天,他按照地图来到了一片被标记为JSZX的洞穴群地区 . ...
- 【csp模拟赛九】--dfs
思路: 这道题可以宽搜,深搜,最短路 代码: #include<cstdio> #include<cstring> #include<iostream> #incl ...
- 容器网络启用RDMA高速通讯-Freeflow
容器网络启用RDMA高速通讯-Freeflow 容器网络启用RDMA高速通讯-Freeflow 本文编译自: Freeflow,https://github.com/openthings/Freefl ...
- LOJ3102. 「JSOI2019」神经网络 [DP,容斥,生成函数]
传送门 思路 大部分是感性理解,不保证完全正确. 不能算是神仙题,但我还是不会qwq 这题显然就是求:把每一棵树分成若干条链,然后把链拼成一个环,使得相邻的链不来自同一棵树,的方案数.(我才不告诉你们 ...