Question

我正在接触javascript并且遇到多个onClick属性的问题。我已经有了一些代码，但它似乎更容易和更简洁的方式来解决问题。

我想要导航菜单，超链接背景获取颜色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

＆＃13;

is

＆＃13;

to

＆＃13;

这是制作JavaScript导航菜单的一个非常简单的示例不要忘记在此代码中插入jQuery，并且不需要href =＆＃34;＃＆＃34;

JavaScript导航菜单多个onclick

3 个答案: