Помогите с версткой
Привет ребята! Я только начал заниматься версткой сайта и столкнулся с одной проблемой.
У меня на сайте есть определенный список. Справа от него имеется блок. Вот как бы сделать так, чтобы при клике на определенную ссылку из поля в правом блоке менялось информация (соответственно без перезагрузки страницы) |
Цитата:
<html>
<head>
<title></title>
<script>
var mas = ["inf0", "inf1", "inf2", "inf3"];
function inf(val) {
document.getElementById("information").innerHTML = mas[val];
}
</script>
</head>
<body>
<div id="information"></div>
<div>
<ul>
<li onClick="inf(0)"><a href="#">1</a></li>
<li onClick="inf(1)"><a href="#">2</a></li>
<li onClick="inf(2)"><a href="#">3</a></li>
<li onClick="inf(3)"><a href="#">4</a></li>
</ul>
</div>
</body>
</html>
|
А что нужно, чтобы информация выводилась в 2 местах
Получается 2 блока в одном должно появляться одно а вдругом другое? Такое возможно сделать? |
Raptor2013,
<html>
<head>
<title></title>
<script>
var mas1 = ["inf1.0", "inf1.1", "inf1.2", "inf1.3"];
var mas2 = ["inf2.0", "inf2.1", "inf2.2", "inf2.3"];
function inf(val) {
document.getElementById("information1").innerHTML = mas1[val];
document.getElementById("information2").innerHTML = mas2[val];
}
</script>
</head>
<body>
<div id="information1"></div><div id="information2"></div>
<div>
<ul>
<li onClick="inf(0)"><a href="#">1</a></li>
<li onClick="inf(1)"><a href="#">2</a></li>
<li onClick="inf(2)"><a href="#">3</a></li>
<li onClick="inf(3)"><a href="#">4</a></li>
</ul>
</div>
</body>
</html>
|
<ul id="list">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<div id="inf1"></div>
<div id="inf2"></div>
<script>
window.onload = function () {
var list = document.getElementById('list');
var inf1 = document.getElementById('inf1');
var inf2 = document.getElementById('inf2');
var mas1 = ["inf1.0", "inf1.1", "inf1.2", "inf1.3"];
var mas2 = ["inf2.0", "inf2.1", "inf2.2", "inf2.3"];
list.onclick = function (e) {
e = e || event;
var target = e.target || e.srcElement;
if (target.tagName == 'A') {
var num = target.innerHTML - 1;
inf1.innerHTML = mas1[num];
inf2.innerHTML = mas2[num];
}
}
}
</script>
|
Спасибо большое всем!
|
Цитата:
А то выдает ошибку undefined |
Ну там надо ещё вычислить какой по счёту номер имеет элемент в списке, ради примера использования target я не стал этого делать и взял за номер содержимое ссылки
|
<ul id="list">
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
<div id="inf1"></div>
<div id="inf2"></div>
<script>
window.onload = function () {
var list = document.getElementById('list');
var inf1 = document.getElementById('inf1');
var inf2 = document.getElementById('inf2');
var mas1 = ["inf1.0", "inf1.1", "inf1.2", "inf1.3"];
var mas2 = ["inf2.0", "inf2.1", "inf2.2", "inf2.3"];
function index(elem) {
var elems = elem.parentNode.children;
var len = elems.length;
for (var i = 0; i < len; i++) {
if (elem == elems[i]) {
return i;
}
}
}
list.onclick = function (e) {
e = e || event;
var target = e.target || e.srcElement;
if (target.parentNode.parentNode.id == 'list') {
var num = index(target.parentNode);
inf1.innerHTML = mas1[num];
inf2.innerHTML = mas2[num];
}
}
}
</script>
PS: возможно есть проще способы определить номер элемента в списке |
| Часовой пояс GMT +3, время: 15:34. |