Javascript 通过单击列表更改段落_Javascript_Html_Css

Javascript 通过单击列表更改段落

javascript html css

Javascript 通过单击列表更改段落,javascript,html,css,Javascript,Html,Css,所以我昨天问了这个问题！：我只是在学习html，css，javascript的东西，我坚持了一点。我有一个网页，由css设计如何单击列表项仅更改段落，而不更改css设计（见图）名单如下： <div id="bodyleft"> <h2>History</h2> <li><a href="#">1996-2000</a></li> the paragraph is: <div id="bodyrig

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

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

如何单击列表项仅更改段落，而不更改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!!

但是每个

项目都做同样的。我怎样才能像这样将他们分开：点击

项目1
->Write1

点击

项目2
->Write2

点击

项目3
->写入3

谢谢

好的，这就是我想要的：=>

谢谢你的帮助

这是因为你的目标是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;
};

document.querySelector

返回列表中的第一个匹配项，因此

ul li

将返回第一个

li

。仅针对

ul

，您应该可以：

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

演示：

这个解决方案怎么样：

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


函数更改名（id）{
var test=document.getElementById（'main'）
如果（id='item1'）{
test.innerHTML='item1 clicked'；
}
如果（id='item1'，则为else）{
test.innerHTML='item1 clicked'；
}
如果（id='item2'，则为else）{
test.innerHTML='item2 clicked'；
}
如果（id='item3'）为else{
test.innerHTML='item3 clicked'；
}
如果（id='item4'，则为else）{
test.innerHTML='item4 clicked'；
}
如果（id='item5'，则为else）{
test.innerHTML='item5 clicked'；
}       
}
历史





该段为：
废话废话废话废话
这将改变
我想要这个！！

我尝试过这个方法，但在这种情况下，只有列表中的第一项起作用，其他项什么也不起作用。@PeterBarta-你应该制作一个JSFIDLE复制这个问题。在这种情况下，尝试使用相同的索引。请参阅下面我的更新答案。我如何做到这一点，单击列表项编写不同的文本？因为在本例中，每个

项都为我编写sameNot…每个项都显示正确的文本。。。运行Chrome--@peterbarta我的意思是写“点击”+target.innerHTML，但我想在每次点击时写不同的文本，比如：List1->Hello List2->Bye List3->Welcome

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