Heim > Web-Frontend > HTML-Tutorial > 导航栏问题_html/css_WEB-ITnose

导航栏问题_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:46:18
Original
1158 Leute haben es durchsucht

类似于百度新闻:

当我第一次进入百度新闻是,默认是首页被选中的。


而当我点击互联网时,互联网的超链接是被选中的。



请问这种技术是怎么实现的?有什么学习的地方吗?能不能给个大体的思路。


回复讨论(解决方案)

我看了一下,百度是这么做的:为选中的标签添加  class=current
然后css文件中有:

menu-list .current a {    color: #304E80;    border-bottom: 3px solid #3064BB;    text-decoration: none;}
Nach dem Login kopieren
Nach dem Login kopieren


这样就完成这样的效果了~

就是点击时改变自己的样式,同时改变其他所有li的样式呀!

我看了一下,百度是这么做的:为选中的标签添加 class=current
然后css文件中有:

menu-list .current a {    color: #304E80;    border-bottom: 3px solid #3064BB;    text-decoration: none;}
Nach dem Login kopieren
Nach dem Login kopieren


这样就完成这样的效果了~


是要用JS吗?获取元素的ID然后更改样式?

你做2个页面

一个页面  首页是选中状态

一个页面  互联网是选中状态


然后后 首页  里面的  互联网  点击后跳转到  互联网页面

你做2个页面

一个页面  首页是选中状态

一个页面  互联网是选中状态


然后后 首页  里面的  互联网  点击后跳转到  互联网页面


这种方法好笨!

http://www.96kb.com/uploadfile/201311/6152345.zip
完整的demo,你看看!和百度新闻一样!

a:active


你做2个页面

一个页面  首页是选中状态

一个页面  互联网是选中状态


然后后 首页  里面的  互联网  点击后跳转到  互联网页面


这种方法好笨!

大流量访问的页面  最终不就是 这样的

可以用jq写   当鼠标经过互联网  就添加.current类其他兄弟删除类

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage