> 웹 프론트엔드 > HTML 튜토리얼 > 导航栏问题_html/css_WEB-ITnose

导航栏问题_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:46:18
원래의
1158명이 탐색했습니다.

类似于百度新闻:

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


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



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


回复讨论(解决方案)

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

menu-list .current a {    color: #304E80;    border-bottom: 3px solid #3064BB;    text-decoration: none;}
로그인 후 복사
로그인 후 복사


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

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

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

menu-list .current a {    color: #304E80;    border-bottom: 3px solid #3064BB;    text-decoration: none;}
로그인 후 복사
로그인 후 복사


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


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

你做2个页面

一个页面  首页是选中状态

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


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

你做2个页面

一个页面  首页是选中状态

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


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


这种方法好笨!

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

a:active


你做2个页面

一个页面  首页是选中状态

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


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


这种方法好笨!

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

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿