收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2118|回复: 4

分享一个导航点击变换样式的代码

[复制链接]
发表于 2012-8-2 13:01:34 | 显示全部楼层 |阅读模式
近来看到很多网站的导航都是点击后导航样式跟着变化,我是个新手,当时很好奇这个样式是怎样写出来的,近来研究jq 才发现js 和jqurey都可以实现并且还很简单,高手勿喷。



<!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>
<style>
*{ margin:0; padding:0; border:0px; list-style:none; margin:0 auto;}
*a { text-decoration:none; color:#FFF;}
ul { width:800px; height:30px; background-color:#C33;}
ul li { float:left; width:160px; height:30px; line-height:30px; text-align:center; color:#FFFFFF;}
ul li a { color:#FFFFFF; display:block; width:160px; height:30px; text-decoration:none;}
.first { background-color:#0000FF;}
ul li a:hover {color:#FFF; display:block; width:160px; height:30px; text-decoration: underline; background-color:#03F;}
</style>
<script type="text/javascript" src="http://www.moorecat.com/static/javascript/jquery.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function (){
         $("li").each(function(index){
                                     
                $(this).click(function(){       
                $("li").removeClass("first");
                $("li").eq(index).addClass("first");
                });
                });
        });
</script>
</head>
<body>
<ul>
<li class="first"><a href="#">首页</a></li>
<li><a href="#">列表</a></li>
<li><a href="#">内容</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>
 楼主| 发表于 2012-8-2 14:20:54 | 显示全部楼层
是啊 找到个老乡不容易哦 、
回复 支持 1 反对 0

使用道具 举报

 楼主| 发表于 2012-8-2 13:03:33 | 显示全部楼层
怎么才能让代码放到编辑器里方便看呢?
回复 支持 反对

使用道具 举报

发表于 2012-8-2 14:12:58 | 显示全部楼层
这样就可以了。。嘎嘎

 提示:您可以先修改部分代码再运行



回复 支持 反对

使用道具 举报

发表于 2012-8-2 14:17:26 | 显示全部楼层
zhenxi537 发表于 2012-8-2 13:03
怎么才能让代码放到编辑器里方便看呢?

兄弟是周口滴???   

我是漯河的。。

老乡你好!!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-8-8 06:12 , Processed in 0.115918 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表