0

というわけで、昨日こんな質問をしました！

私はhtml、css、javascriptのことを学んでいて、ある点に固執しています。私はcssによって設計されたWebページを持っています。

リスト項目をクリックして 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/

OKそれは私が望んでいたことでした:=> 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

document.querySelectorはリスト内の最初の一致を返すため、 は最初の を返しul liますli。のみをターゲットにulしてください。問題ありません。

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

デモ: http://jsfiddle.net/tymeJV/NwFXE/4/

于 2013-09-19T13:16:52.107 に答える