0

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

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

如何单击列表项仅更改PARAGRAPH，而不更改设计的css（见图）

http://i.stack.imgur.com/zs59U.jpg

清单在：

<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/

好的，这就是我想要的 :=> http://jsfiddle.net/NwFXE/5/

感谢您的帮助！

4

3 回答 3

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>
于 2013-09-19T13:29:25.303 回答
0

这是因为您的目标是 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;
};
于 2013-09-19T13:02:15.370 回答
0

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

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

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

于 2013-09-19T13:16:52.107 回答