javascript - Onclick 更改段落内容（在其他 div 中）

Question

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

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

http://i.stack.imgur.com/zs59U.jpg -- 或者 -- i.stack.imgur.com/zs59U.jpg

清单在：

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

该段是：

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

我尽我所能，但没有任何效果！请帮帮我！谢谢你。

Answer 1

你可以试试这样的

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

演示。

Answer 2

获取 bodyright 元素中的 p 标签。

var myDiv = document.getElementById('bodyright'),
    myP = myDiv.getElementsByTagName('p');
myP[0].innerHTML = 'hi there';

http://jsfiddle.net/BJFVY/