Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > прогрузка кода по нажатию ссылки

Автор: w03zd8rc 26.2.2008, 11:37

надо сделать так чтоб при нажатии на одну ссылку прогрузался один код, а при нажатии на другую другой. никак не могу понять как это реализовать и поиск по форуму не дал никаких результатов.

суть проблемы такова - есть одно место под 2 блока, над этим местом 2 ссылки, когда пользователь нажимает первую ссылку в это место прогружается один код, когда вторую другой. И ещё надо сделать так чтоб при первой загрузке страницы прогружался первый код (какбы по умолчанию). я понимаю что код получится несложный, но всётаки у мя не получилось даже при помощи учебников.

Автор: w03zd8rc 26.2.2008, 12:34

или хотяб если не сложно подскажите как проверить существует ли переменная? это получается так:

if (isset(str))
{ str = 1; }

(проверка существования переменной, если нет то создать её со значением 1), правильно или я чтото напутал?

и как мне по ссылке изменять значение этой переменной?

<a href="javascript:str = 2">str=2</a>

так?

если не сложно поправте меня где я ошибки допустил

Автор: Sardar 26.2.2008, 12:48

Что ты подразумеваешь под "кодом"? Обычно подгружается весь JS, всё что не нужно просто не выполняется по условию. Также можно включение JS генерить на сервере, по запросу определять что же тебе нужно.

Цитата(w03zd8rc @ 26.2.2008, 11:34

)

или хотяб если не сложно подскажите как проверить существует ли переменная?

Похоже нужно сесть за мануал на пару дней, тебе это всегда пригодиться. if(typeof(str) != "undefined), а переменную лучше изменять из функции, вызови её из-ссылки.

Чую какой то не хороший костыль, на подобие двух больших листингов document.write? Выкладывай задачу полностью, именно смысл, чего хочешь достичь, а не решение этой, не совсем логичной задачи.

Автор: w03zd8rc 26.2.2008, 13:15

кратко я уже выложил смысл того что должно получится, а если поподробнее то мне надо примерно такое:

есть 2 куска кода например первый:

Код


<table border="0" cellpadding="0" cellspacing="0" width="215" style="background:url('http://ххх') no-repeat;">
<tr><td height="35" style="color:#FFFFFF;padding-left:20px;padding-top:15px;"><b>Библиотека</b></td></tr> 
<tr><td style="padding:5px 5px 5px 15px;">тут будет библиотека</td></tr>
</table>

второй:

Код


<table border="0" cellpadding="0" cellspacing="0" width="215" style="background:url('http://src.ucoz.ru/t/993/5.jpg') no-repeat;">
<tr><td height="35" style="color:#FFFFFF;padding-left:20px;padding-top:15px;"><b>остальное</b></td></tr> 
<tr><td style="padding:5px 5px 5px 15px;">тут будет всё остальное</td></tr>
</table>

и допустим 2 ссылки

Код


<a>библиотека</a>
<a>прочее</a>

надо чтоб при первой загрузке по умолчанию прогружался первый код, если пользователь нажимает 2ю ссылку грузится второй код, если первую то первый.

структура чтото типо такого:

Код


<html>
<body>
//если переменная str не существует создать её и присвоить 1
//если str = 1 то вывести это:
{
<table border="0" cellpadding="0" cellspacing="0" width="215" style="background:url('http://ххх') no-repeat;">
<tr><td height="35" style="color:#FFFFFF;padding-left:20px;padding-top:15px;"><b>Библиотека</b></td></tr> 
<tr><td style="padding:5px 5px 5px 15px;">тут будет библиотека</td></tr>
</table>
}
//если str = 2 то это:
{
<table border="0" cellpadding="0" cellspacing="0" width="215" style="background:url('http://ххх') no-repeat;">
<tr><td height="35" style="color:#FFFFFF;padding-left:20px;padding-top:15px;"><b>остальное</b></td></tr> 
<tr><td style="padding:5px 5px 5px 15px;">тут будет всё остальное</td></tr>
</table>
}
<a>библиотека</a> //присваиваем str = 1
<a>прочее</a> // присваиваем str = 2
</body>
</html>

вот примерно такого типа надо сделать

Автор: Sardar 26.2.2008, 15:34

Зачем оно на JS? Содержимое страницы надо формировать на сервере. По любому на клиенте придётся грузить всё, т.к. до ajax'а тебе чую ещё рано. Самый простой вариант:

Код


<html>
<body>
<script type="text/javascript">

function show(t) {
   var tbs = document.getElementById("tables").childNodes;
   for(var i = 0, j = 0; i < tbs.length; i++) {
      if(tbs[i].tagName == 'div') {
          tbs[i].style.display = j == t? 'block': 'none';
          j += 1;
      }
   }
}

</script>

<div id="tables">
<div>
<table border="0" cellpadding="0" cellspacing="0" width="215" style="background:url('http://ххх') no-repeat;">
<tr><td height="35" style="color:#FFFFFF;padding-left:20px;padding-top:15px;"><b>Библиотека</b></td></tr> 
<tr><td style="padding:5px 5px 5px 15px;">тут будет библиотека</td></tr>
</table>
</div>

<div><table border="0" cellpadding="0" cellspacing="0" width="215" style="background:url('http://ххх') no-repeat;">
<tr><td height="35" style="color:#FFFFFF;padding-left:20px;padding-top:15px;"><b>остальное</b></td></tr> 
<tr><td style="padding:5px 5px 5px 15px;">тут будет всё остальное</td></tr>
</table>
</div>

</div>

<a href="#" onclick="show(0);">библиотека</a>
<a href="#" onclick="show(1);">прочее</a>
</body>
</html>

Посмотри в сторону PHP.

Автор: w03zd8rc 27.2.2008, 10:50

сделал так:

Код


<html>
<head>
<script type="text/javascript">
function show(t) 
{
  if ((document.getElementById("a1").style.display='')&&
     (document.getElementById("a2").style.display=''))
  {
    document.getElementById("a2").style.display='none';
  }
  if (t==0)
  {
    document.getElementById("a1").style.display='';
    document.getElementById("a2").style.display='none';
  } else
  {
    document.getElementById("a1").style.display='none';
    document.getElementById("a2").style.display='';
  }
}
</script>
</head>
<body onLoad="show(2);">
<table id="a1" border="0" cellpadding="0" cellspacing="0" width="215" style="background:url('http://ххх') no-repeat;">
<tr><td height="35" style="color:#FFFFFF;padding-left:20px;padding-top:15px;"><b>Библиотека</b></td></tr> 
<tr><td style="padding:5px 5px 5px 15px;">тут будет библиотека</td></tr>
</table>
<table id="a2" border="0" cellpadding="0" cellspacing="0" width="215" style="background:url('http://ххх') no-repeat;">
<tr><td height="35" style="color:#FFFFFF;padding-left:20px;padding-top:15px;"><b>остальное</b></td></tr> 
<tr><td style="padding:5px 5px 5px 15px;">тут будет всё остальное</td></tr>
</table>
<a href="#" onclick="show(0);">библиотека</a>
<a href="#" onclick="show(1);">прочее</a>
</body>
</html>

тут он не выполняется эта часть кода

Код


  if ((document.getElementById("a1").style.display='')&&
     (document.getElementById("a2").style.display=''))
  {
    document.getElementById("a2").style.display='none';
  }

в чём моя ошибка?

Автор: bars80080 27.2.2008, 10:57

попробуйте

Код


if ((document.getElementById("a1").style.display=='')&&
     (document.getElementById("a2").style.display==''))

Автор: w03zd8rc 27.2.2008, 11:09

=) спс, такая детская ошибка =D всё работает