微信公众号 讲师中心
首页
文章
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 JavaScript 后端开发 数据库 移动端 运维开发 UI设计 计算机基础 XML Web Services
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > web前端 > html教程 > 正文

导航栏问题_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:46:18
原创
1329人浏览过
AI建筑知识问答
AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

AI建筑知识问答22
查看详情 AI建筑知识问答

类似于百度新闻：

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


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



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


回复讨论(解决方案)

我看了一下，百度是这么做的：为选中的标签添加  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类其他兄弟删除类

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：JetBrains IntelliJ平台中的 LESS CSS compiler 插件_html/css_WEB-ITnose 下一篇：ios 跳转appstore评论页面_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
html5怎么样_HTML5技术优势与应用场景全面分析 HTML5作为现代Web开发核心技术，通过语义化标签、原生多媒体支持、本地存储、丰富API及跨平台兼容性，广泛应用于在线教育、移动端应用、数据可视化、网页游戏和PWA，推动Web向高性能、离线化、跨设备方向发展。
2025-10-30 23:57:02
953
如何压缩HTML代码去除多余字符_HTML代码压缩去除多余字符 压缩HTML代码通过去除多余空白、注释和换行减小文件体积，提升加载速度。浏览器会合并连续空白且不影响渲染，故可安全删除标签间空格与换行；使用正则替换\s+为单个空格并清理首尾。需删除调试信息、旧IE条件注释等无用注释，但保留必要构建标记。推荐用HTMLMinifier等工具自动化压缩，如在线工具、Webpack插件、NginxGzip或VSCode扩展。开发环境保持代码可读，上线前自动压缩并结合Gzip传输，兼顾维护性与性能，显著优化前端加载。
2025-10-30 23:52:02
647
怎么用HTML插入模态窗口_HTML dialog元素与CSS模态框实现方案 使用HTMLdialog元素可创建语义化模态窗口，通过showModal()和close()方法控制显隐，结合JavaScript实现打开关闭交互，并利用CSS自定义样式及::backdrop伪元素设置遮罩效果，现代浏览器支持良好。
2025-10-30 23:51:01
263
如何制作HTML在线问卷工具_HTML在线问卷工具制作与数据收集方案 答案：制作HTML在线问卷需构建语义化表单、添加CSS样式与响应式设计，并通过后端或第三方服务实现数据收集。首先使用HTML定义文本框、单选框、复选框等元素，确保必填项验证；接着用CSS设置表单布局与交互样式，适配多设备；最后选择Node.js、PHP等后端技术或Formspree、Netlify等无服务器服务存储数据，结合JavaScript验证与防重提交机制提升用户体验。
2025-10-30 23:50:01
558
html如何插入ppt_HTML内容插入PowerPoint（嵌入/链接）方法 可将HTML内容通过复制粘贴、超链接、Web控件、截图或第三方工具插入PowerPoint。1.复制粘贴适合静态内容；2.超链接可跳转至在线网页；3.Web控件嵌入仅限Windows版，依赖IE内核；4.截图插入保证格式统一；5.第三方插件如LiveWeb提升交互性。根据演示需求与环境选择合适方式，确保内容正常展示。
2025-10-30 23:36:03
266
HTML5代码如何设计打印样式 HTML5代码中media print的规则 使用@mediaprint可控制打印样式，隐藏导航栏、侧边栏等非内容元素，设置字体大小12pt、黑色文字、白色背景，并通过page-break避免内容截断，@page定义页边距，Chrome开发者工具可预览效果。
2025-10-30 23:33:08
977
为什么HTML在线链接跳转失效_HTML在线链接跳转失效原因与路由配置方案 前端路由与服务器配置不匹配导致HTML链接跳转失效，需配置服务器将所有请求回退到index.html，并在SPA中使用路由组件替代原生a标签。
2025-10-30 23:29:01
737
HTML数据如何构建数据市场 HTML数据市场平台的架构设计 答案是构建HTML数据市场需整合采集、管理、交易与合规体系，通过爬虫或上传获取网页数据，利用解析引擎将HTML转为结构化信息并标注元数据，依托分布式存储与版本控制保障数据可用性，建立索引分类和质量评估机制提升检索效率，通过商品发布、搜索推荐、API服务和计费系统实现数据流通，同时遵守法律规范，实施身份审核、数据脱敏与访问审计以确保安全合规，核心在于持续维护数据新鲜度与准确性，形成可信可交易的数据产品闭环。
2025-10-30 23:21:02
595
HTML文档怎么包含CSS_CSS包含在HTML文档中的具体操作 内联样式通过style属性为单个元素设置样式，如；2.内部样式表在中使用标签定义页面级样式；3.外部样式表将CSS保存为独立文件并通过引入，便于多页共享。
2025-10-30 23:19:01
881
html种子如何下载_HTML种子文件（Torrent）下载与处理方法 HTML种子指通过网页获取的普通Torrent文件，需从HTML页面点击.torrent链接或磁力链接下载，再用qBittorrent等BT客户端打开，选择保存路径后连接Tracker并与其他用户交换数据完成下载。应优先选择可信资源站，避开可疑附件，检查做种人数并用杀毒软件扫描文件确保安全。
2025-10-30 23:09:02
700
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

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

  • PHP学习

  • 技术支持

  • 返回顶部