同时突出显示同一页面上不同菜单中的 li答案

【问题标题】：Highlight li from Different Menus on the Same Page at the Same Time同时突出显示同一页面上不同菜单中的 li
【发布时间】：2021-08-08 14:54:33
【问题描述】：

<script>$(document).ready(function() {
    $("#menu li a").on('click', function() {
        var page = $(this).data('page');
            $("#pages .page:not('.hide')").stop().fadeOut('fast', function() {
                $(this).addClass('hide');
                $('#pages .page[data-page="'+page+'"]').fadeIn('slow').removeClass('hide');
            });
        });
    });
</script>

<script>$(function () {
    $("#categories li, #bottom-page li").click(function (e) {
        e.preventDefault();
            $("#categories li, #bottom-page li").addClass("active").not(this).removeClass("active");
        });
    });
</script>
    
<script>
    function goto($hashtag){
        document.location = "store.html#" + $hashtag;
    }
</script>

#categories {
    font-size: 0;
    width: 86%;
    position: relative;
    top: 0;
    left: calc(50% - 43%);
    float: left;
}

#categories ul li {
    font-size: 16px;
    background-color: #f1c96c;
    text-align: center;
    width: 32%;
    margin-top: 3em;
    display: inline-block;
}

#categories ul li:hover {
    background-color: #f2e860
}

#categories ul li a {
    color: #112c61;
    font-size: .85em;
    text-decoration: none;
    padding: 1em 0;
    display: block;
}

.nowrap {
    white-space: nowrap;
}

.hide {
    display: none;
}

li.active [data-page='category-1'] {
    background-color: lavender;
}

li.active [data-page='category-2'] {
    background-color: lavender;
}

li.active [data-page='category-3'] {
    background-color: lavender;
}

#bottom-page {
    font-size: 0;
    width: 86%;
    position: relative;
    top: 0;
    left: calc(50% - 43%);
    float: left;
}

#bottom-page ul { float: right; }

#bottom-page ul li {
    font-size: 16px;
    cursor: pointer;
    width: 60px; height: 40px;
    display: inline-block;
}

#bottom-page ul li a {
    font-size: .85em;
    text-decoration: none;
    text-align: center;
    line-height: 1.4;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    display: block;
}

#bottom-page ul li:hover { background-color: #f3efb4; }

<section id="categories"><div id="top"></div>
    <div id="categories-line">
        <ul id="menu" class="nowrap">
            <li><a data-page="category-1" name="top" href="#">PRODUCTS <span>A&nbsp;-&nbsp;I</span></a></li>
            <li><a data-page="category-2" name="top" href="#">PRODUCTS <span>J&nbsp;-&nbsp;R</span></a></li> 
            <li><a data-page="category-3" name="top" href="#">PRODUCTS <span>S&nbsp;-&nbsp;Z</span></a></li>
        </ul>
    </div>
</section>


<section id="bottom-page">
    <ul id="menu" class="nowrap">
        <li><a data-page="category-1" onclick="goto('top')">Page<br>1</a></li>
        <li><a data-page="category-2" onclick="goto('top')">Page<br>2</a></li> 
        <li><a data-page="category-3" onclick="goto('top')">Page<br>3</a></li>
    </ul>
</section>

我在导航下方的页面顶部有一个菜单，该菜单按字母顺序分隔页面上的产品。此菜单由跨越页面宽度的三个选项卡组成，它们分别是 A-I、J-R、S-Z。选项卡下会列出一堆产品，具体取决于选择的选项卡。

在最后一个产品之后的页面底部是一个菜单，与顶部菜单相同，但样式不同，即第 1 页、第 2 页、第 3 页。我想让第 1 页、第 2 页和第 3 页对应单击时到顶部的正确选项卡。因此，当单击顶部或底部的一个时，第 1 页和第一个顶部选项卡处于活动状态并突出显示。感谢您的帮助！

【问题讨论】：

标签： menu html-lists highlight

【解决方案1】：

您的问题需要阅读很多内容，请尽可能简短。如果您的代码由 HTML 或 CSS 组成，最好使用 stack overflow's code snippets 示例：

<!DOCTYPE html>
<html>
    <head>
        <title>My Website</title>
    </head>
    <body>
        <h1>Hello!</h1>
        <section>
            <h3>Work</h3>
            <ol>
                <li>Technical Blogs</li>
                <li>Front End Projects</li>
            </ol>
        </section>
    </body>
</html>

【讨论】：