05.08.2012, 16:48
|
|
Новичок на форуме
|
|
Регистрация: 05.08.2012
Сообщений: 9
|
|
|
Помогите с версткой
Привет ребята! Я только начал заниматься версткой сайта и столкнулся с одной проблемой.
У меня на сайте есть определенный список. Справа от него имеется блок.
Вот как бы сделать так, чтобы при клике на определенную ссылку из поля в правом блоке менялось информация (соответственно без перезагрузки страницы)
|
|
05.08.2012, 16:52
|
 |
Профессор
|
|
Регистрация: 03.05.2011
Сообщений: 848
|
|
Сообщение от Raptor2013
|
Привет ребята! Я только начал заниматься версткой сайта и столкнулся с одной проблемой.
У меня на сайте есть определенный список. Справа от него имеется блок.
Вот как бы сделать так, чтобы при клике на определенную ссылку из поля в правом блоке менялось информация (соответственно без перезагрузки страницы)
|
либо с помощью AJAX подгружать с сервера данные для блока, либо
<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>
|
|
05.08.2012, 17:09
|
|
Новичок на форуме
|
|
Регистрация: 05.08.2012
Сообщений: 9
|
|
|
А что нужно, чтобы информация выводилась в 2 местах
Получается 2 блока в одном должно появляться одно а вдругом другое? Такое возможно сделать?
Последний раз редактировалось Raptor2013, 05.08.2012 в 17:11.
|
|
05.08.2012, 20:51
|
|
Профессор
|
|
Регистрация: 03.05.2011
Сообщений: 848
|
|
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>
|
|
05.08.2012, 23:00
|
 |
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
<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>
|
|
07.08.2012, 18:55
|
|
Новичок на форуме
|
|
Регистрация: 05.08.2012
Сообщений: 9
|
|
|
Спасибо большое всем!
|
|
07.08.2012, 21:15
|
|
Новичок на форуме
|
|
Регистрация: 05.08.2012
Сообщений: 9
|
|
|
Сообщение от bes
|
<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 |
|
07.08.2012, 21:20
|
|
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
|
Ну там надо ещё вычислить какой по счёту номер имеет элемент в списке, ради примера использования target я не стал этого делать и взял за номер содержимое ссылки
|
|
07.08.2012, 21:58
|
|
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
<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: возможно есть проще способы определить номер элемента в списке |
|
|
|
