m0_58961550 2021-11-30 16:42 采纳率: 100%
浏览 83
已结题

web导航栏设置设置导航栏

设置导航栏，文字为a,b
点击a显示1，2
点击b显示3，4

  • 写回答

1条回答 默认 最新

  • 你好！机器人 2021-11-30 17:05
    关注
    
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">

        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style: none;
            }
            
            #nav {
                margin: 50px;
                position: relative;
            }
            
            #nav li.current a {
                color: #f60;
            }
            
            #nav li {
                float: left;
                padding: 0 20px;
                height: 25px;
                position: relative;
            }
            
            #nav li a {
                font: 14px/25px '宋体';
                font-weight: bold;
                color: #000;
                text-decoration: none;
            }
            
            #nav li ul {
                display: none;
                position: absolute;
                left: 0;
                top: 25px;
                border: 1px solid #ccc;
                text-align: center;
                background: #f00;
            }
        </style>
    </head>

    <body>
        <script type="text/javascript">
            $(function() {
                $('#nav > li').click(function() { //hover是鼠标悬浮，click是鼠标点击。
                    $(this).addClass('current').siblings('li').removeClass('current');
                    $('#nav > li > ul').hide();
                    $(this).find('ul').show();
                })
            })
        </script>
        <ul id="nav">
            <li>
                <a href="#">a</a>
                <ul>
                    <li>
                        <a href="#">1</a>
                    </li>
                    <li>
                        <a href="#">2</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">b</a>
                <ul>
                    <li>
                        <a href="#">3</a>
                    </li>
                    <li>
                        <a href="#">4</a>
                    </li>
                </ul>
            </li>
        </ul>
    </body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

  • Web前端开发-简单导航栏实例
    2020-05-17 12:32
    关于HTML中的导航栏的设计(夏季风格)~可以出现鼠标悬停效果变化~用div框起来，使用ul标签包含a。
  • 有趣的导航栏-有趣的导航栏
    2024-11-19 21:39
    "有趣的导航栏"在当前的Web设计中越来越受到重视。它不仅能够提供必要的导航功能，还能够增加网站的趣味性，提升用户体验。设计师和开发者需要紧密合作，充分利用各种设计和编程技术，来创造既实用又有吸引力的导航...
  • Header导航栏修改前端
    2025-03-14 18:02
    未来的前端技术，比如Web Components、微前端等，也将为Header导航栏的设计带来新的可能性。 Header导航栏的设计与修改是一个结合了视觉设计、前端技术和用户体验的复杂过程。前端开发者需要不断地学习新技术、掌握...
  • Web前端二级导航栏设计
    2023-04-06 10:59
    千帐灯无此声的博客 初学web，220行代码，巨丑
  • web项目导航栏源码下载
    2016-09-30 11:21
    在Web开发中，导航栏是网站布局的重要组成部分，它提供了用户友好的界面，帮助用户轻松地在各个页面间切换。本资源提供的是一个基于jQuery实现的鼠标悬停下拉导航菜单的源码下载，适用于构建现代Web项目中的交互式...
  • web前端使用HTML+CSS编写导航栏
    2024-03-22 23:43
    稻草人404的博客 HTML导航栏是网页中的一个重要组件
  • 【Web前端二级导航栏】
    2022-09-01 10:19
    sakura欣悠的博客 * 取消li标签的点样式效果 *//* 设置自动内减 *//* 字体设置 *//* 内容布局 *//* 字体设置 *//* 内容布局 */
  • 前端入门，如何做一个导航栏？
    2024-09-28 17:23
    明月清风#的博客 HTML 导航栏的 CSS 设计。包括设置导航栏整体布局、背景，调整 logo 尺寸与边距，美化导航链接列表，设计搜索部分，突出 “注册”“登录” 链接。CSS 可将导航栏变得美观实用，提升用户体验和网站品质。
  • 制作web网页头部导航栏
    2021-12-04 12:16
    予我心安A3的博客 （1）新建HTML文件。写入代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...（2）网页头部导航栏的一堆按钮实际是由<ul>和<li>标签制作..
  • vue elementUI使用tabs与导航栏联动
    2020-10-16 19:22
    在前端开发中，常常需要通过导航栏进行页面的快速跳转，同时，在多标签页（tabs）场景下，又需要能够打开并管理多个视图组件。本文将探讨如何使用Vue.js结合Element UI来实现一个导航栏与tabs组件的联动。 首先，...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 12月9日
  • 已采纳回答 12月1日
  • 创建了问题 11月30日