***请教,这种仿淘宝样式得排序样式怎么弄?_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 12:20:56
原创
1456人浏览过

请教,这种仿淘宝样式得排序样式怎么弄?

选择背景即变,就像选项卡一样,求代码


回复讨论(解决方案)

问题补充:
以下是实现的切换按钮,问题是为什么在ie浏览器,世界之窗浏览器 里测试 ,鼠标移上去或移上去后离开,背景颜色变橙色,而在360浏览器,谷歌浏览器里颜色始终是白色?求高手指点

附代码:
#navColumn {width:710px;}
#navColumn ul {padding-left:2px;height:29px;margin:0px;padding:0px;font-size:12px;text-align:center;list-style:none;}
#navColumn li {float:left;line-height:29px; height:29px;text-align:center;width:82px;background:#fff;}
#navColumn li.now a:link,#navColumn li.now a:visited {color:#FC8004;font-size:14px;font-weight:700;background:#FC8004;}
#navColumn a:link,#navColumn a:visited {width:82px;display:block;}
#navColumn a:hover,#navColumn a:active {width:82px;height:29px;display:block;text-decoration:none;font-weight:700;background-color:#FC8004;}

按钮代码:
          


                 

                       
  • 默认排序

  •                    
  • 供应

  •                    
  • 需求

  •                  

           


这是需要js配合的,当点击后给当前标签添加一个selected的样式名,然后给selected添加个background-color即可。

理解错误。。。也没看到你后来的补充,不好意思。看了下,你那个在谷歌浏览器里也是正常的,按理说都是正常的,可能是你浏览器缓存的问题吧。

不行,我这里测试不行,360浏览器,谷歌浏览器不显示背景色

不行,我这里测试不行,360浏览器,谷歌浏览器不显示背景色

随便写个给你看看。

<!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>demo</title><style type="text/css">	a {		display:block;		text-decoration:none;		float:left;		border:1px solid silver;		width:60px;		height:25px;		line-height:25px;		text-align:center;	}	a:hover{		background-color:red;	}</style></head><body><div class = "nav">	<a href="#">Item1</a>	<a href="#">Item2</a>	<a href="#">Item3</a></div></body></html>
登录后复制

淘宝
淘宝

淘宝是一个好逛、丰富、有趣的消费生活社区,每天有亿万消费者来淘宝“逛街”:发现好物、找到乐趣、表达体验……淘宝能满足人们生活中的各种需求,有需要的小伙伴快来保存下载体验吧!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号