Question

所以昨天我问了这个问题！：

我只是在学习html，css，javascript的东西而且我坚持了一点。我有一个由css设计的网页。

如何点击列表项仅更改PARAGRAPH，而不是更改设计的CSS（参见图片）

列表位于：

<div id="bodyleft">
<h2>History</h2>
<li><a href="#">1996-2000</a></li>
the paragraph is:

<div id="bodyright">
<h2>blah blah blah blah blah blah </h2>
<p> blah blah blah....  </p> and I want thange THIS!!

我得到了一个有用的答案：

var ul = document.querySelector('#bodyleft ul');
ul.onclick = function(e){
    var evt = e || window.event;
    var target = evt.target || evt.srcElement;
    var p = document.querySelector('#bodyright p');
    p.innerHTML = 'Clicked on ' + target.innerHTML;
    return false;
};

但每个<li>项目执行相同。我如何分开，如：点击<li>Item1</li> ->Write1 点击<li>Item2</li> ->Write2 点击<li>Item3</li> ->Write3 ??

谢谢！

http://jsfiddle.net/NwFXE/

好的，我想要的是：=＆gt; http://jsfiddle.net/NwFXE/5/

感谢您的帮助！

Answer 1

这个解决方案怎么样：

<head>
    <script type="text/javascript">
        function changeMe(id){
            var test = document.getElementById('main')
            if (id == 'item1') {
                test.innerHTML = 'item1 clicked';
            }
            else if (id == 'item1') {
                test.innerHTML = 'item1 clicked';
            }
            else if (id == 'item2') {
                test.innerHTML = 'item2 clicked';
            }
            else if (id == 'item3') {
                test.innerHTML = 'item3 clicked';
            }
            else if (id == 'item4') {
                test.innerHTML = 'item4 clicked';
            }
            else if (id == 'item5') {
                test.innerHTML = 'item5 clicked';
            }       
        }
    </script>
</head>
<body>
<div id="bodyleft">
<h2>History</h2>
<li id="item1" onclick="changeMe('item1');"><a href="#">Item1</a></li>
<li id="item2" onclick="changeMe('item2');"><a href="#">Item2</a></li>
<li id="item3" onclick="changeMe('item3');"><a href="#">Item3</a></li>
<li id="item4" onclick="changeMe('item4');"><a href="#">Item4</a></li>
<li id="item5" onclick="changeMe('item5');"><a href="#">Item5</a></li>

the paragraph is:

<div id="bodyright">
<h2>blah blah blah blah blah blah </h2>
<p id="main"> this will change  </p> 
and I want thange THIS!!

</body>

Answer 2

这种情况正在发生，因为您的目标是UL。

而是将其更改为LI，如下所示：

var li = document.querySelector('#bodyleft ul li');
    li.onclick = function(e){
    var evt = e || window.event;
    var target = evt.target || evt.srcElement;
    var p = document.querySelector('#bodyright p');
    p.innerHTML = 'Clicked on ' + target.innerHTML;
    return false;
};

Answer 3

document.querySelector会返回列表中的第一个匹配项，因此ul li将返回第一个li。只针对ul，你应该没问题：

var li = document.querySelector('#bodyleft ul');

演示：http://jsfiddle.net/tymeJV/NwFXE/4/

单击列表更改段落

3 个答案: