`
rigger21
  • 浏览: 132368 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

实现选项卡的自动跳转

阅读更多
<script>function StorePage(){d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://www.365key.com/storeit.aspx?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'keyit','scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes'));keyit.focus();}</script>

index.jsp页面代码 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0054)http://www.happyshow.org/sample/20060926/yahootag.html -->
<HTML><HEAD><TITLE>标签</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>.tag_box {
BORDER-RIGHT: #b0bec7 1px solid; BORDER-TOP: #b0bec7 1px solid; MARGIN: 50px; FONT: 12px Arial, Helvetica, sans-serif; OVERFLOW: hidden; BORDER-LEFT: #b0bec7 1px solid; WIDTH: 400px; BORDER-BOTTOM: #b0bec7 1px solid; HEIGHT: 126px
}
.tag_box UL.menulist {
MARGIN: 0px; OVERFLOW: hidden; WIDTH: 402px; HEIGHT: 20px
}
.tag_box UL.menulist LI {
BACKGROUND: url(tag_bg1.gif) repeat-x; FLOAT: left; WIDTH: 80px; LINE-HEIGHT: 19px; LIST-STYLE-TYPE: none; POSITION: relative; HEIGHT: 19px; TEXT-ALIGN: center
}
.tag_box UL.menulist LI A {
DISPLAY: block; BACKGROUND: url(tag_pipe.gif) no-repeat right 1px; WIDTH: 80px; COLOR: #18397c; BORDER-BOTTOM: #93a6b4 1px solid; TEXT-DECORATION: none
}
.tag_box UL.menulist LI A:hover {
TEXT-DECORATION: underline
}
.tag_box UL.menulist LI A.curMenu {
BORDER-RIGHT: #91a7b4 1px solid; BORDER-TOP: #91a7b4 1px solid; FONT-WEIGHT: bold; Z-INDEX: 100; BACKGROUND: url(tag_bg2.gif) repeat-x; LEFT: -1px; BORDER-LEFT: #91a7b4 1px solid; WIDTH: 81px; COLOR: #c63; BORDER-BOTTOM: medium none; POSITION: absolute; TOP: -1px; HEIGHT: 21px
}
.tag_box A.nonebg {
BACKGROUND: none transparent scroll repeat 0% 0%
}
.tag_content {
CLEAR: both; PADDING-RIGHT: 6px; PADDING-LEFT: 6px; PADDING-BOTTOM: 6px; PADDING-TOP: 6px
}
.tag_content IMG.bigConImg {
BORDER-RIGHT: #788a98 1px solid; BORDER-TOP: #788a98 1px solid; DISPLAY: block; FLOAT: left; BORDER-LEFT: #788a98 1px solid; BORDER-BOTTOM: #788a98 1px solid
}
.tag_content H5 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 2px; MARGIN: 3px 6px; WIDTH: 250px; PADDING-TOP: 2px; BACKGROUND-COLOR: #f7f7f7; TEXT-ALIGN: center
}
.tag_content A {
COLOR: #16387c; TEXT-DECORATION: none
}
.tag_content A:hover {
TEXT-DECORATION: underline
}
.tag_content P {
PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FLOAT: left; PADDING-BOTTOM: 2px; MARGIN: 0px; LINE-HEIGHT: 18px; PADDING-TOP: 2px
}
.tag_content UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 3px; PADDING-TOP: 0px
}
.tag_content LI {
MARGIN-BOTTOM: 3px; MARGIN-LEFT: 20px
}
</STYLE>
<script src="_files/switchTag.js"></script> 这里需要引入JS文件。。。
<META content="MSHTML 6.00.6000.16481" name=GENERATOR></HEAD>
<BODY onload=init()>
<DIV class=tag_box id=tag_menu>
<UL class=menulist id=menulist>
<LI><A class=curMenu onfocus=this.blur() onclick=fivetag(this,1)
href="#">Home</A> </LI>
<LI><A onfocus=this.blur() onclick=fivetag(this,2)
href="#">Software</A>
</LI>
<LI><A onfocus=this.blur() onclick=fivetag(this,3)
href="#">Product</A>
</LI>
<LI><A onfocus=this.blur() onclick=fivetag(this,4)
href="#">AboutUs</A>
</LI>
<LI><A onfocus=this.blur() onclick=fivetag(this,5)
href="#">ContactUs</A>
</LI>
</UL>
<!--
-->
<DIV class=tag_content id=tag_content_1><IMG class=bigConImg
src="yahoo%20标签_files/tag_1_img.jpg">
<H5><A href="http://www.happyshow.org/sample/20060926/yahootag.html#">Supercars
for the super-richHome</A></H5>
<P>For those who can drop six figures on a car, there's a fresh crop of shiny
new 2007 models. &raquo; <A
href="http://www.happyshow.org/sample/20060926/yahootag.html#">More</A></P></DIV>
<DIV class=tag_content id=tag_content_2><IMG class=bigConImg
src="yahoo%20标签_files/tag_2_img.jpg">
<H5><A href="http://www.happyshow.org/sample/20060926/yahootag.html#">Time and
again Software</A></H5>
<UL>
<LI><A
href="http://www.happyshow.org/sample/20060926/yahootag.html#">Negroponte says
U.S. not at higher risk</A>
<LI><A href="http://www.happyshow.org/sample/20060926/yahootag.html#">U.S. to
relax ban of liquids on planes</A>
<LI><A href="http://www.happyshow.org/sample/20060926/yahootag.html#">U.S.
pursues closer ties with Kazakhstan</A> </LI></UL></DIV>
<DIV class=tag_content id=tag_content_3><IMG class=bigConImg
src="yahoo%20标签_files/tag_3_img.jpg">
<H5><A href="http://www.happyshow.org/sample/20060926/yahootag.html#">Saints'
storybook return Product</A></H5>
<P>In front of a sellout Superdome crowd, New Orleans rides the emotional wave
to victory over Atlanta. &raquo; <A
href="http://www.happyshow.org/sample/20060926/yahootag.html#">More</A></P></DIV>
<DIV class=tag_content id=tag_content_4><IMG class=bigConImg
src="yahoo%20标签_files/tag_4_img.jpg">
<H5><A href="http://www.happyshow.org/sample/20060926/yahootag.html#">Fall
foliage alternatives AboutUs</A></H5>
<P>Dieting with a partner can be motivating, but presents unexpected challenges
as well. &raquo; <A
href="http://www.happyshow.org/sample/20060926/yahootag.html#">More</A></P></DIV>
<DIV class=tag_content id=tag_content_5><IMG class=bigConImg
src="yahoo%20标签_files/tag_5_img.jpg">
<H5><A href="http://www.happyshow.org/sample/20060926/yahootag.html#">10 ways to
earn more pay ContactUs</A></H5>
<P>Why settle for your current salary and benefits when you can negotiate for
more? &raquo; <A
href="http://www.happyshow.org/sample/20060926/yahootag.html#">More</A></P></DIV></DIV>修改:

<UL style="FONT: 11px Tahoma">
<LI>每隔一段时间自动循环切换Tag (修改于 2006-10-10) </LI></UL>
<DIV style="MARGIN-TOP: 50px; FONT: 12px '宋体'">Writen By <A
href="http://www.happyshow.org/" target=_blank>快乐笛子</A></DIV></BODY></HTML>

JS文件代码如下:

var currentTag = 1;
function fivetag(obj,id){
selectMenu(obj);
for (var i =1,j; j=document.getElementById("tag_content_"+i); i++){
j.style.display="none";
}
document.getElementById("tag_content_"+id).style.display="block";
currentTag++;
if (currentTag>5)
currentTag=1;
}
function selectMenu(obj){
var lia = document.getElementById("menulist").getElementsByTagName("li");
var lialen = lia.length;
for(i=0; i<lialen; i++){
if(lia[i].getElementsByTagName("a")[0].className=="curMenu")
lia[i].getElementsByTagName("a")[0].className = "";
}
obj.className = "curMenu";
}
function init(){
var menulist = document.getElementById("menulist");
setInterval('fivetag(menulist.getElementsByTagName("li")[currentTag-1].getElementsByTagName("a")[0],currentTag)',1000);//这里设置时间的长短。
}

分享到:
评论

相关推荐

    TIA博途Wincc-如何实现开机画面等待几秒后,自动跳转到主画面?.docx

    ### TIA博途Wincc-如何实现开机画面等待几秒后,自动跳转到主画面? #### 背景介绍 在工业自动化领域,人机交互界面(HMI)是连接操作人员与控制系统的重要桥梁。TIA博途Wincc作为西门子推出的集成工程软件的一...

    jquery 切换选项卡

    jQuery 实现选项卡切换的步骤通常包括以下几步: 1. **HTML 结构**:首先,你需要在 HTML 中设置好选项卡的基本结构。每个选项卡头应该有一个唯一的 ID 或类名,以便于 jQuery 识别。同时,将所有内容隐藏,只显示...

    jQuery纵向tab选项卡内容切换代码

    "jQuery纵向tab选项卡内容切换代码"是一个专为实现垂直布局的选项卡设计的实例,它允许用户通过点击不同的选项卡来切换显示的内容。在网页布局中,这种垂直排列的选项卡模式可以节省横向空间,尤其适用于空间有限...

    完美实现js选项卡切换效果(一)

    4. 自动切换功能的实现:除了手动切换选项卡之外,文章还介绍了如何通过JavaScript实现选项卡的自动播放功能。这通过定时器函数setInterval来完成。每隔2秒(可自定义),定时器会触发一个函数来更新当前的激活索引...

    如何在Word中创建目录同时实现页码跳转

    在Microsoft Word中,可以通过内置的功能轻松创建目录,并且实现点击目录项自动跳转至文档对应位置的效果。接下来,我们将详细介绍整个操作过程。 #### 二、准备工作 在开始创建目录之前,请确保您的文档已经按照...

    Android3D画廊Gallery实现无限循环和自动跳转

    本教程将深入讲解如何在Android应用中实现一个3D画廊(Gallery)组件,支持无限循环、自动跳转以及倒影效果。 首先,我们需要理解`Gallery`组件。`Gallery`是Android提供的一个HorizontalScrollView的扩展,用于...

    jquery触屏滑动选项卡切换代码.zip

    6. **DOM操作**:jQuery库提供了方便的DOM操作方法,如`.append()`、`.hide()`、`.show()`等,用于创建、修改和操作页面元素,实现选项卡内容的动态加载和隐藏。 7. **初始化与配置**:在JavaScript中,我们需要...

    10-03 顶部选项卡

    TabLayout可以自动同步选项卡的选中状态和ViewPager的当前页面。 3. **Fragment**:在Android中,Fragment是UI组件的一部分,可以被添加到Activity中。在顶部选项卡的每个页面通常会使用Fragment来承载不同的内容。...

    jQuery焦点图带缩略图选项卡特效

    【jQuery焦点图带缩略图选项卡特效】是一种常见的网页动态效果,用于展示一组图片或内容,通过焦点图的方式切换,同时提供缩略图选项卡作为导航,用户可以通过点击缩略图来快速跳转到相应的主图。这种特效在网站广告...

    右侧选项卡点击切换jQuery焦点图.zip

    本项目“右侧选项卡点击切换jQuery焦点图”提供了一种高效且美观的解决方案,利用jQuery UI库来实现这一功能。jQuery UI是jQuery的一个扩展库,提供了丰富的用户界面插件和组件,包括拖放、日期选择器、对话框等,...

    多界面切换(1).rar

    在labview中实现多界面之间切换,目前个人总结出以下几种方法,后续将继续更新,合理使用以下方法可以大大简化程序流程,如下所示: - 方法一:使用选项卡控件;...这里实现了利用选项卡实现多界面切换的几种方法

    tab选项卡前后有向前和向后按钮,点击实现上一个下一个

    实现功能:(选项卡)选项卡前后有一个向前、向后的点击功能,点左边的向前移一个,点右边的向后移一个。

    jquery多图片控制左右切换选项卡代码.zip

    选项卡(Tab)是一种常见的UI设计模式,它允许用户在多个视图之间切换,而无需在页面之间跳转。在这个项目中,选项卡与图片轮播相结合,提供了一种高效的图片浏览体验。jQuery库中的动画效果使得在不同图片间切换时...

    jQuery网站垂直选项卡切换代码.zip

    jQuery的选项卡切换功能主要通过其丰富的API和事件机制来实现。首先,我们需要在HTML中设置基础结构,通常包括一个容器(如div)来包裹所有选项卡和内容区域,每个选项卡是一个链接(a标签),对应的内容区域则隐藏...

    html导航,菜单,选项卡,代码生成器

    在HTML中,导航通常通过`&lt;nav&gt;`标签创建,菜单和选项卡则通常由`&lt;ul&gt;`(无序列表)和`&lt;li&gt;`(列表项)结合其他HTML元素实现。CSS则用来定义这些元素的视觉表现,如颜色、字体、位置和交互效果。 导航栏是网页头部...

    选项卡插件

    在网页设计和开发中,选项卡插件是一种常见的交互元素,用于组织和展示大量内容,让用户可以方便地在不同部分之间切换,而无需滚动或跳转页面。JavaScript 选项卡插件是实现这一功能的首选工具,因为它们提供了丰富...

    unigui选项卡_手风琴分组

    选项卡控件在用户界面设计中非常常见,它允许用户在不同的视图或内容之间切换,而无需在多个窗口之间跳转。Unigui中的选项卡组件提供了一种组织和展示信息的有效方式,用户可以轻松地在不同选项卡之间导航,每个选项...

    jQuery Tab选项卡插件.zip

    6. **响应式设计**:在移动设备流行的今天,选项卡插件应具有良好的响应性,能够根据屏幕大小自动调整布局。这可能涉及媒体查询(media queries)和自适应CSS。 7. **优化与兼容性**:为了确保插件在各种浏览器和...

    基于jQuery实现的右侧Tab选项卡切换对应图片的焦点图插件源码.zip

    本项目“基于jQuery实现的右侧Tab选项卡切换对应图片的焦点图插件源码”正是一个这样的前端代码示例,旨在实现一种常见的用户体验设计——选项卡式焦点图。 选项卡式布局是一种有效组织信息的方式,尤其适用于展示...

    tab选项卡插件(6星级)

    1. **选项卡设计原则**:选项卡设计的基本目标是提高用户导航效率,通过将相关功能或内容分组到不同的标签下,减少用户在页面间的跳转。良好的选项卡设计应遵循一致性、清晰性和简洁性原则,确保用户能快速理解和...

Global site tag (gtag.js) - Google Analytics