Изменение пункта, нажав на список

Question

Изменение пункта, нажав на список

0

Поэтому я вчера задал этот вопрос !:

Я просто изучаю 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/

ОК, ЧТО Я ХОЧУ: => http://jsfiddle.net/NwFXE/5/

Спасибо за помощь!

Peter Barta 19 сен. 2013, в 15:36

Источник

Теги:

javascript

html

css

3 ответа

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

Ganesh Pandhere 19 сен. 2013, в 11:22

0

Я пробовал это, но в этом случае работает только первый элемент списка, другие ничего не делают.
Peter Barta 19 сен. 2013, в 13:04
0

@PeterBarta - Вы должны сделать jsfiddle, повторяющий проблему.
tymeJV 19 сен. 2013, в 13:07
0

попробуйте использовать индекс того же в этом случае.
Ganesh Pandhere 19 сен. 2013, в 13:08
0

Я отправил jsfiddle!
Peter Barta 19 сен. 2013, в 13:14

Показать ещё 2 комментария

0

document.querySelector возвращает первое совпадение в списке, поэтому ul li возвращает первый li. Только нацелитесь на ul, и вы должны быть в порядке:

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

Демо: http://jsfiddle.net/tymeJV/NwFXE/4/

tymeJV 19 сен. 2013, в 10:48

0

И как я могу это сделать, нажимая на элементы списка, писать разные тексты? Потому что в этом случае каждый элемент <li> пишет одинаково
Peter Barta 19 сен. 2013, в 13:32
0

Не для меня ... каждый элемент отображает правильный текст ... работает Chrome - @PeterBarta
tymeJV 19 сен. 2013, в 13:42
0

Я имею в виду его написать 'Clicked on' + target.innerHTML, но я хочу писать разные тексты при каждом клике, например: List1-> Hello List2-> Bye List3-> Welcome
Peter Barta 19 сен. 2013, в 13:45
0

Я не очень понимаю, что вы хотите .... @PeterBarta
tymeJV 19 сен. 2013, в 13:49

Показать ещё 2 комментария

Ещё вопросы

Я пробовал это, но в этом случае работает только первый элемент списка, другие ничего не делают.
@PeterBarta - Вы должны сделать jsfiddle, повторяющий проблему.
попробуйте использовать индекс того же в этом случае.
И как я могу это сделать, нажимая на элементы списка, писать разные тексты? Потому что в этом случае каждый элемент <li> пишет одинаково
Не для меня ... каждый элемент отображает правильный текст ... работает Chrome - @PeterBarta
Я имею в виду его написать 'Clicked on' + target.innerHTML, но я хочу писать разные тексты при каждом клике, например: List1-> Hello List2-> Bye List3-> Welcome
Я не очень понимаю, что вы хотите .... @PeterBarta

Mike · Accepted Answer · 2013-09-19T11-16-00.000Z

Как насчет этого решения:

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