JS实现标签页效果(配合css)不同标签下对应不同div

显示页面tab.jsp

<%@   page   language = "java"   import = "java.util.*"   pageEncoding = "utf-8" %>
<! DOCTYPE   html   PUBLIC   "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html   xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta   http-equiv = "Content-Type"   content = "text/html; charset=utf-8"   />
< title > 标签页效果 </ title >
< link   href = "tab.css"   rel = "stylesheet"   type = "text/css"   />
< script   language = "JavaScript"   type = "text/javascript"   src = "jquery-1.5.1.js" ></ script >
< script   language = "JavaScript"   type = "text/javascript"   src = "tab.js" ></ script >
</ head >
< body >
< ul   id = "tabfirst" >
< li   class = "tabin" > 标签1 </ li >
< li > 标签2 </ li >
< li > 标签3 </ li >
</ ul >
  < div   id = "contentnow"   class = "contentfirst contentin" > 我是内容1 </ div >
< div   id = "contentnow"   class = "contentfirst" > 我是内容2 </ div >
< div   id = "contentnow"   class = "contentfirst" > 我是内容3 </ div >
</ body > </ html >

tab.css

ul ,li { margin:0px;

padding:0px;

list-style:none;

}

li { float:left;

background-color:#66CC00;

margin-right:2px; //这个是设置标签之间的间距

padding:5px;

border:1px solid white;

height:20px;

color:white;

}

.listli { background-color:#663333;

border:1px solid #663333;

}

div { clear:left;

width:300px;

height:100px;

background-color:#663333;

border-top:0px;

color:white;

display:none;

}

.divarea { display:block; }

tab.js

//定义全局变量
var timeout;
$(document).ready( function (){
//找到所有的 li 标签
$( "li" ).each( function (index){
$( this ).mouseover( function (){
//滑动门都要设置一个延迟时间，避免用户疯狂移动鼠标，导致服务器崩溃，这个很重要
timeout =setTimeout( function (){
$( "div.divarea" ).removeClass( "divarea" );
$( "li.listli" ).removeClass( "listli" );
// $(" div "). eq (index).addClass(" divarea "); //另一种写法是:$(div:eq(index)).addClass(" divarea ");
$( "div:eq(" +index+ ")" ).addClass( "divarea" );
$( "li" ).eq(index).addClass( "listli" );
},
320);
$( this ).mouseout( function (){
clearTimeout(timeout);
});
});
}); });

效果图为这样

来自为知笔记(Wiz)

转载于:https://www.cnblogs.com/wang3680/p/3267548.html

JS实现标签页效果(配合css)不同标签下对应不同div相关推荐

用css和jquery实现标签页效果（一）
用css和jQuery实现一个简单的标签页效果,用css实现斜边导航的效果,除了ie6其他的浏览器都支持, 其效果如下 css样式: <style type="text/css ...
Python爬虫之selenium对标签页切换、切换frame标签、cookie处理、执行js代码、开启无界面、以及使用代理ip和替换user-agent等方法
一.selenium对标签页切换.切换frame标签.cookie处理.执行js代码.开启无界面.以及使用代理ip和替换user-agent等方法 (一).selenium标签页的切换当seleni ...
【Axure交互教程】可滑动的标签页效果
作品名称:可滑动的标签页效果作品编号:Case002 软件版本:Axure9 作品类型:交互案例原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Case00 ...
实现JS标签切换效果【CSS图片切换】
运行代码尝试,我把整篇的CSS文件内容都弄上来了,难得去找具体内容了,反正能得到效果就可以了. 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
自定义浏览器起始页、主页和标签页（html+css）
以Chrome为例,自定义一个浏览器的起始页 Chrome的标签页有两个个人不太喜欢的点.一个是无法自定义浏览器的访问按钮,一个是搜索框在顶上的标签栏.在手机上,夸克浏览器的起始界面用户体验非常好,就 ...
css3和jQuery实现一个简单的标签页效果
主要用css3另外一种jQuery思路方法来实现标签页的切换效果,主要用css3来实现一些渐变,阴影和圆角效果, css代码如下: body{width: 600px;margin: 100px au ...
【033】Bootstrap实现标签页效果
版本 Bootstrap v3.3.6 jQuery v1.11.3 实现方法给显示标签页内容的DIV分别设置上ID: tab_1 和 tab_2.在标签页按钮上的 href 属性设置 #tab_1 ...
HTML文本下划线效果,聊聊CSS中文本下划线_CSS, SVG, masking, clip-path, 会员专栏, text-decoration 教程_W3cplus...
在Web中给文本添加下划线常常出现在链接的文本上,早期一般使用text-decoration属性给文本添加下划线.删除线等.除了text-decoration之外,CSS还有很多技术方案可以给文本添加 ...
Edge浏览器使用BdTab新标签页插件（BD新标签页）
当我们的浏览器成功安装BdTab新标签页插件之后的效果: 如果我们在关闭浏览器,重新打开之后回到edge浏览器的默认界面时(如下): 这个时候我们首先要确定BdTab新标签页插件是否开启了,这个是否开 ...

JS实现标签页效果(配合css)不同标签下对应不同div

JS实现标签页效果(配合css)不同标签下对应不同div相关推荐

最新文章

热门文章