编程联盟 编程联盟
广告联系 站点地图 设为首页
站长作品 关于本站 收藏本站
首页>>开发资料>>Ajax编程>> 标签切换效果

标签切换效果

查看次数: 275
发布时间:2008-11-14 0:00:00
作者: 编程联盟
来源: 编程联盟
 
概要:以前发过一个标签切换的东东。链接:http://www.fblog.net.cn/readblog.asp?blogid=4&id=209演示:http://www.fblog.net.cn/codeshow/tab/这个用了一大段的JS,而且在DIV的写法上也是非常的麻烦,稍不注意就出错 ...
中间左侧广告位
以前发过一个标签切换的东东。
链接:http://www.fblog.net.cn/readblog.asp?blogid=4&id=209
演示:http://www.fblog.net.cn/codeshow/tab/
这个用了一大段的JS,而且在DIV的写法上也是非常的麻烦,稍不注意就出错了。
现在用JQUERY来实现这个功能主简单多了
演示:http://www.fblog.net.cn/codeshow/jquerytab/
代码: $(document).ready(function(){ $(".menuli>a").click(function(){ $(".menuli>a").attr("class""link2"); $(this).attr("class""link1"); $(".tabContent>ul").css("display""none"); $("#"+$(this).attr("rel")).css("display""block"); }) }) .blog{width:300px;height:100px;border:1px solid #555;} .blog h3{font-size:12px;margin:0px;padding:0px;font-weight:100;background-color:#555;} .blog h3 ul{list-style:none;margin:0px;padding:0px;height:20px;margin-left:5px;} .blog h3 ul li{float:left;height:20px;line-height:20px;} .blog h3 ul li a{display:block;text-decoration:none;padding-left:5px;padding-right:5px;} .link1:link.link1:visited{background-color:#fff;color:#666;} .link2:link.link2:visited{color:#fff;}
推荐博文 最新博文
推荐博文列表 最新博文列表
[Ctrl+A 全部选择]
文章来源:http://www.bcbbs.net/news/Content.aspx?id=1494
文章来源:http://www.bcbbs.net/news/Content.aspx?id=1494
收藏本文章 关闭本页
精彩推荐
精彩推荐
编程联盟 | 编程论坛 | 关于本站 | 站点地图 | 友情链接 | 联系我们

Powered by 编程联盟版权所有 ? 2007-2009 bcbbs.net
冀ICP备07500001号 冀ICP备08005404号


空间赞助商:北京易德科技有限公司