HTML标签导航怎么做？

提问，这个功能怎么写？
我重新描述一下，我意思是比如用户打开了多个标签，会在导航栏下面也就是内容的顶部生成对应的标签，并且切换每个标签都不会影响每个标签之前的操作，如果标签满了会生成一个向下的箭头，点击箭头显示所有已打开的标签。并且每个标签都有关闭按钮。

以下是我的示例代码，期望能够帮忙添加完善一下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>你的网站名称</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/css/layui.css" media="all">

    <!-- HTML5 Shiv -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <![endif]-->

    <!-- Respond.js -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <!-- 顶部导航栏 -->
        <ul class="layui-nav" lay-filter="">
            <li class="layui-nav-item" id="home"><a href="javascript:;">首页</a></li>
            <li class="layui-nav-item" id="products"><a href="javascript:;">产品</a></li>
            <li class="layui-nav-item" id="contacts"><a href="javascript:;">通讯录</a></li>
            <li class="layui-nav-item" id="hr-system"><a href="javascript:;">人力系统</a></li>
            <li class="layui-nav-item" id="logout"><a href="javascript:;">退出</a></li> <!-- 添加退出按钮 -->
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <!-- 左侧目录树 -->
        <div class="layui-side-scroll" id="side-scroll">
            <!-- 默认显示的内容为空 -->
        </div>
    </div>
    <div class="layui-body" id="content-area">
        <!-- 内容区域 -->
        <div style="padding: 15px;">内容...</div>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.js" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js" charset="utf-8"></script>
<script>
    // JavaScript代码区域
    layui.use(['element', 'jquery'], function () {
        var element = layui.element;
        var $ = layui.jquery;

        // 默认显示的左侧目录为公司简介
        var defaultSideContent = `
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item">
                    <a href="javascript:;">公司简介</a>
                </li>
            </ul>
        `;

        // 默认显示公司简介的内容
        var defaultContent = `
            <h2>默认内容 - 公司简介</h2>
            <p>这是默认显示的公司简介内容。</p>
        `;

        // 将默认的左侧目录和内容显示在页面上
        $('#side-scroll').html(defaultSideContent);
        $('#content-area').html(defaultContent);

        // 点击顶部导航首页时
        $('#home').on('click', function () {
            var sideContent = `
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item">
                        <a href="javascript:;">公司简介</a>
                    </li>
                </ul>
            `;
            var content = `
                <h2>公司简介</h2>
                <p>这是公司的详细介绍。</p>
            `;

            // 更新左侧目录和内容
            $('#side-scroll').html(sideContent);
            $('#content-area').html(content);
        });

        // 点击顶部导航产品时
        $('#products').on('click', function () {
            var sideContent = `
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item">
                        <a href="javascript:;">水果</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" class="fruit">苹果</a></dd>
                            <dd><a href="javascript:;" class="fruit">香蕉</a></dd>
                        </dl>
                    </li>
                </ul>
            `;
            var content = `
                <h2>默认内容 - 产品</h2>
                <p>这是默认显示的产品内容。</p>
            `;

            // 更新左侧目录和内容
            $('#side-scroll').html(sideContent);
            $('#content-area').html(content);

            // 收缩二级菜单
            $('.layui-nav-item').removeClass('layui-nav-itemed');
        });

        // 点击顶部导航通讯录时
        $('#contacts').on('click', function () {
            var sideContent = `
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item">
                        <a href="javascript:;">公司1</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" class="department1">部门1</a></dd>
                            <dd><a href="javascript:;" class="department2">部门2</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">公司2</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" class="department3">部门3</a></dd>
                            <dd><a href="javascript:;" class="department4">部门4</a></dd>
                        </dl>
                    </li>
                </ul>
            `;
            var content = `
                <h2>默认内容 - 通讯录</h2>
                <p>这是默认显示的通讯录内容。</p>
            `;

            // 更新左侧目录和内容
            $('#side-scroll').html(sideContent);
            $('#content-area').html(content);

            // 收缩二级菜单
            $('.layui-nav-item').removeClass('layui-nav-itemed');
        });
        // 点击顶部导航人力系统时
        $('#hr-system').on('click', function () {
            var sideContent = `
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <li class="layui-nav-item">
                <a href="javascript:;">用户数据</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" class="user-data">人员基本信息管理台账</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">用户数据2</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" class="user-data2">人员基本信息管理台账2</a></dd>
                </dl>
            </li>
        </ul>
    `;


            // 更新左侧目录和内容
            $('#side-scroll').html(sideContent);
            $('#content-area').html(content);

            // 收缩二级菜单
            $('.layui-nav-item').removeClass('layui-nav-itemed');
        });

        // 点击水果名称时
        $('#side-scroll').on('click', '.fruit', function () {
            var fruit = $(this).text();
            var content = `
                <h2>${fruit}</h2>
                <p>这是${fruit}的介绍。</p>
            `;
            $('#content-area').html(content);
        });

        // 点击部门1名称时
        $('#side-scroll').on('click', '.department1', function () {
            var department1 = $(this).text();
            var content = `
                <h2>${department1}</h2>
                <p>这是${department1}的联系人和联系电话。</p>
            `;
            $('#content-area').html(content);
        });
        // 点击部门2名称时
        $('#side-scroll').on('click', '.department2', function () {
            var department2 = $(this).text();
            var content = `
                <h2>${department2}</h2>
                <p>这是尚勇的联系人和联系电话。</p>
            `;
            $('#content-area').html(content);
        });

        // 点击用户数据的人员基本信息管理台账时
        $('#side-scroll').on('click', '.user-data', function () {
            // 使用AJAX加载personInfo.jsp的内容
            $.ajax({
                url: '../renlixitong/yonghushuju/personInfo.jsp',
                type: 'GET',
                dataType: 'html',
                success: function (data) {
                    // 将personInfo.jsp的内容插入到指定位置
                    $('#content-area').html(data);
                },
                error: function () {
                    alert('加载personInfo.jsp失败');
                }
            });
        });


        // 点击用户数据的人员基本信息管理台账2时
        $('#side-scroll').on('click', '.user-data2', function () {
            var department2 = $(this).text();
            var content = `
                <p>这是尚勇的人员基本信息管理台账2。</p>
            `;
            $('#content-area').html(content);
        });

        // 收缩二级菜单
        $('#side-scroll').on('click', '.layui-nav-item > a', function () {
            $(this).parent().toggleClass('layui-nav-itemed');
        });






        // 退出按钮点击事件
        $('#logout').on('click', function () {
            confirmClear();
        });

        // 弹出确认退出的对话框
        function confirmClear() {
            layer.confirm("您确定要退出登录吗？", function () {
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === XMLHttpRequest.DONE) {
                        if (xhr.status === 200) {
                            layer.alert('用户信息已退出登录！', { icon: 1 }, function (index) {
                                layer.close(index);
                                // 成功后重定向到登录页面
                                window.location.replace("/BWCFdatabase/login.jsp");
                            });
                        } else {
                            layer.alert('退出时候出现错误。', { icon: 2 });
                        }
                    }
                };
                xhr.open("POST", "/BWCFdatabase/clearSession");
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.send();
            });
        }

    });
</script>
</body>
</html>

不知道你这个问题是否已经解决, 如果还没有解决的话:

你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7753595
这篇博客也不错, 你可以看下html 原生滚动条详解，看这一篇就够了！

除此之外, 这篇博客: HTML链接中如何添加确认删除提示框中的 以下是代码： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

<a href="" onclick="return deleteInfo()">删除</a>

<script>
	function deleteInfo() {
        const r = confirm("确定删除此信息？");
        if (r) {
            alert("删除成功");
            return true;
        }
        return false;
	}
</script>

以下回答由chatgpt基于相关博客总结生成:
解决方案
你好！要在HTML中创建一个导航栏，并实现点击导航项时自动滚动到相应的部分，你可以按照以下步骤进行：
1. 首先，你已经创建了一个基本的导航栏，其中包含了四个导航项和对应的部分。这是一个很好的起点。
2. 为了实现点击导航项时自动滚动到相应的部分，你可以使用id属性来标识每个部分。在当前的代码中，每个部分都已经使用了id属性，例如id="section1"，id="section2"，以此类推。
3. 现在，你需要在每个导航项的href属性中添加对应部分的id值。这样点击导航项时，浏览器就会自动滚动到相应的部分。
  html <a href="#section1">Section 1</a> <a href="#section2">Section 2</a> <a href="#section3">Section 3</a> <a href="#section4">Section 4</a>
4. 接下来，你需要使用JavaScript来实现平滑滚动效果。通常情况下，我们会使用scrollIntoView方法来实现。这个方法可以让指定元素平滑地滚动到可视区域。
  javascript document.querySelector('a[href^="#"]').addEventListener('click', function(e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); });
  上述代码将获取所有带有href属性以#开头的<a>元素，并为每个元素添加一个点击事件的监听器。当点击导航项时，监听器将阻止默认的跳转行为，然后使用scrollIntoView方法将相应部分滚动到可视区域，同时添加了一个平滑的滚动效果。
  请将以上JavaScript代码添加到你的HTML文件中</body>标签的上方。
5. 最后，你需要确保你的网页中引入了JavaScript文件。如果在HTML文件中的<head>标签内嵌入了JavaScript代码，你可以将上述代码添加到<script></script>标签中。或者，你也可以将代码保存为一个独立的.js文件，并在HTML文件中使用<script src="your_script.js"></script>引入。
综上所述，以下是你的示例代码完善后的版本：
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar a:hover {
  background-color: #ddd;
  color: black;
}

#section1 {
  height: 500px;
  background-color: #aaa;
}

#section2 {
  height: 500px;
  background-color: #bbb;
}

#section3 {
  height: 500px;
  background-color: #ccc;
}

#section4 {
  height: 500px;
  background-color: #ddd;
}

</style>
</head>
<body>

<div class="navbar">
  <a href="#section1">Section 1</a>
  <a href="#section2">Section 2</a>
  <a href="#section3">Section 3</a>
  <a href="#section4">Section 4</a>
</div>

<div id="section1">
  <h2>Section 1</h2>
  <p>Some text here.</p>
</div>

<div id="section2">
  <h2>Section 2</h2>
  <p>Some text here.</p>
</div>

<div id="section3">
  <h2>Section 3</h2>
  <p>Some text here.</p>
</div>

<div id="section4">
  <h2>Section 4</h2>
  <p>Some text here.</p>
</div>

<script>
document.querySelector('a[href^="#"]').addEventListener('click', function(e) {
  e.preventDefault();
  document.querySelector(this.getAttribute('href')).scrollIntoView({
    behavior: 'smooth'
  });
});
</script>

</body>
</html>
```
请注意，这只是一个示例代码，你可以根据你的需求进行调整和修改。希望这能帮到你！如果你还有其他问题，请随时提问。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

你这个看上去用了一整套的控件，比如说 easyui 之类的。不必从头写起