JavaScript 导航菜单多次点击

Question

我正在接触 javascript，只是遇到了多个 onClick 属性的问题。我已经有了一些代码，但它似乎是解决问题的更简单、更简洁的方法。

我想要一个导航菜单，其中超链接背景在点击时获得颜色，博客 div 更改其内容。此外，如果您单击另一个超链接，它会更改背景颜色，并且其他超链接将重置为其原始背景颜色

到目前为止，这是我的代码。似乎可行，但不确定这是否可行

-- HTML

<div id="container">
    <div id="navigation_bar">
        <nav>
            <ul>
                <li class="red" id="1"><a href="#" onclick="showDiv1(this)">NavMenu1</a></li>
                <li class="red" id="2"><a href="#" onclick="showDiv2(this)">NavMenu2</a></li>
                <li class="red" id="3"><a href="#" onclick="showDiv3(this)">NavMenu3</a></li>
                <li class="red" id="4"><a href="#" onclick="showDiv4(this)">NavMenu4</a></li>
            </ul>
        </nav>
    </div>
    <div id="blog">
        <div id="category_1" style="display: none">
            <img src="#" alt="xx" />
            <article>
                <p>Content of first navigation bar</p>
            </article>
        </div>
        <div id="category_2" style="display: none;">
            <article>
                <p>Content of second navigation button</p>
            </article>
        </div>
    </div>
</div>

---

JavaScript

function showDiv1(obj) {
    var elchosen = document.getElementById('category_1');
    elchosen.setAttribute('style', 'display:block;');

    var spanID = obj.parentNode.id;
    var newNode = document.getElementById(spanID);

    var menus = document.getElementsByClassName("rood");
    for (var i = menus.length - 1; i >= 0; i--) {
        var elem = document.getElementById(menus[i].id);
        elem.style.backgroundColor = "transparent";

    }

    newNode.style.backgroundColor = "red";
}

function showDiv2(obj) {

    var elchosen = document.getElementById('category_1');
    elchosen.setAttribute('style', 'display:none;');

    var elchosen = document.getElementById('category_2');
    elchosen.setAttribute('style', 'display:block;');

    var spanID = obj.parentNode.id;
    var newNode = document.getElementById(spanID);

    var menus = document.getElementsByClassName("red");
    for (var i = menus.length - 1; i >= 0; i--) {
        var elem = document.getElementById(menus[i].id);
        elem.style.backgroundColor = "transparent";

    }

    newNode.style.backgroundColor = "red";
}

只是想知道是否有简单的方法可以通过使用诸如 category_n 和 showDiv(n) 等之类的东西来实现，只是不要像我上面那样为每个操作编写相同的代码。

我非常感谢任何建议，因为我刚开始深入了解 javascript。

非常感谢

Answer 1

由于问题有一个 jQuery 标记，我将使用它来回答。用类似的东西替换你的 javascript

//Use a delegated event.  Every click on an "a" element within the ##navigation_bar will trigger this
$('#navigation_bar').on('click', 'a', function(){
   // Get li containing the link clicked
   var li = $(this).closest('li');

   // Hide all blog.  Better to use a category on the div like $('.category', '#blog');
   $('#blog > div').hide();
   // Show the one we want to show based on the id of li
   $('#category_' + li.attr('id')).show();

   // Instead of setting colours we change classes.  Remove the red class from all menu items
   $('li', '#navigation_bar').removeClass('red');
   // Add the red class to the active menu item
   li.addClass('red');
});