JavaScript 导航菜单多个 onclick

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');
});

Answer 2

您可以通过 :target 使用锚点和 CSS 来解决整个问题。如果您将 HTML 更改为

<li class="red" id="1"><a href="#category_1">NavMenu1</a></li>
<li class="red" id="2"><a href="#category_2">NavMenu2</a></li>
<li class="red" id="3"><a href="#category_3">NavMenu3</a></li>
<li class="red" id="4"><a href="#category_4">NavMenu4</a></li>

然后添加以下CSS

#blog>div {
 display:none;
}

#blog>div:target {
 display:block;
}

它将负责显示和隐藏 div 文章。除了处理菜单项之外，您甚至不需要 Javascript。您可以有一个简单的 jQuery 侦听器来更改导航颜色，如下所示

$('nav li a').click(function(){
   $('nav li').removeClass('red');
   $(this).parent().addClass('red');

   //Use this line to prevent scrolling to the blog and instead scroll to the top of the page
   window.setTimeout(function(){ window.scrollTo(0,0); }, 0);
});

Answer 3

/*save this file name as script.js*/


function ChangePagetoHome()
{

    $("#A").show();
    $("#B").hide();
    $("#C").hide();

}


function ChangePagetoContact()
{
    $("#A").hide();
    $("#B").show();
    $("#C").hide();

}


function ChangePagetoProfile()
{
    $("#A").hide();
    $("#B").hide();
    $("#C").show();

}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Menu</title>
    <script src="script.js"></script>
    <script src="jquery-1.11.2.min.js"></script>

</head>
<body>

<div id="A">
    <nav>
        <ul>
            <li><a class="active" onclick="ChangePagetoHome();">Home</a></li>
            <li><a onclick="ChangePagetoContact();">Contact us</a></li>
            <li><a onclick="ChangePagetoProfile();">My profile</a></li>
        </ul>
    </nav>
    <p>Hi I Am Home</p>
</div>

<div id="B" style="display: none;">
    <nav>
        <ul>
            <li><a onclick="ChangePagetoHome();">Home</a></li>
            <li><a class="active" onclick="ChangePagetoContact();">Contact us</a></li>
            <li><a onclick="ChangePagetoProfile();">My profile</a></li>
        </ul>
    </nav>
    <p>Hi I Am Contact</p>
</div>

<div id="C" style="display: none;">
    <nav>
        <ul>
            <li><a  onclick="ChangePagetoHome();">Home</a></li>
            <li><a onclick="ChangePagetoContact();">Contact us</a></li>
            <li><a class="active" onclick="ChangePagetoProfile();">My profile</a></li>
        </ul>
    </nav>
    <p>Hi I Am Profile</p>
</div>


</body>
</html>

这是一个非常简单的 JavaScript 导航菜单示例 别忘了在这段代码中插入 jQuery，并且不需要 href="#"