当前位置：首页 → 问答吧 → 惊！！！求解，类似QQlive导航栏的背景切换停留！

惊！！！求解，类似QQlive导航栏的背景切换停留！

时间：2010-06-03

来源：互联网

一直没找到这样的代码，独立的
http://live.qq.com/movie/all/hot2/list_1.html
就是鼠标移动上去后背景变换，网页切换完成后背景停留，其他背景还原
<div class="nav_content">
<a target="_self" href="http://live.qq.com/index.html"><strong>首页</strong></a>
<a target="_self" href="http://live.qq.com/zb/index.html"><strong class="tl">电视台</strong></a>
<a target="_self" class="current" href="http://live.qq.com/movie/all/hot2/list_1.html"><strong>电影</strong></a>
<a target="_self" href="http://live.qq.com/tv/all/hot2/list_1.html"><strong class="tl">电视剧</strong></a>
<a target="_self" href="http://live.qq.com/cartoon/all/hot2/list_1.html"><strong>动漫</strong></a>
<a class="last" target="_self" href="http://live.qq.com/variety/index.html"><strong>综艺</strong></a>
</div>

附件

QQ截图未命名.jpg (7.97 KB)

2010-6-3 18:11

QQlive导航栏

作者: sees2012 发布时间: 2010-06-03

这种标签导航现在用的很广泛的你扒一下QQlive导航栏的 CSS文件有解答

作者: bluehoriz 发布时间: 2010-06-03

这个是有分2种情况的(从静态页面考虑)
一：在一个页面可以用如下代码

<!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=gb2312" /> <title>无标题文档</title> <style type="text/css"> .a{ float:left; background-color:#FFFFFF; border:1px solid #000000; font-weight:bold;} .b{ float:left; background-color:#0000FF; border:1px solid #000000; font-weight:bold;} .c{ color:#ffffff;} </style> </head> <body> <div id="nav"> <div class="b" id="m01"><a href="" class="c" onclick="this.blur()">111</a></div> <div class="b" id="m02"><a href="" class="c">222</a></div> <div class="b" id="m03"><a href="" class="c">333</a></div> <div class="b" id="m04"><a href="" class="c">444</a></div> <div class="b" id="m05"><a href="" class="c">555</a></div> <div class="b" id="m06"><a href="" class="c">666</a></div> </div> <script type="text/javascript"> var cur = 'm01';//默认第几个菜单[值为该菜单项的ID值] var nav = document.getElementById('nav').getElementsByTagName('div'); var nal = nav.length; for(var i=0;i<nal;i++) { if(nav[i].id == cur)nav[i].className = 'a'; nav[i].onmouseover = function() { document.getElementById(cur).className = 'b'; this.className = 'a';//当前样式 } nav[i].onclick = function() { cur = this.id; } nav[i].onmouseout = function() { this.className = 'b';//当前样式 document.getElementById(cur).className = 'a'; } } </script> </body> </html>
提示：您可以先修改部分代码再运行

二：在不同页面，单独定义样式

作者: qxq864298 发布时间: 2010-06-03

惊！！！求解，类似QQlive导航栏的背景切换停留！

附件

热门阅读

热门下载