Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.11.2010, 23:37
Новичок на форуме
Отправить личное сообщение для toyo932_st Посмотреть профиль Найти все сообщения от toyo932_st
 
Регистрация: 28.11.2010
Сообщений: 3

Смена содержания страницы без обновления
Нужно, чтобы когда кликаю SHOW_NEWS появлялось NEWS, когда SHOW_FILES появлялось FILES. Вот попробовал написать не работает. Помогите плз

<html>
<head>
<script>
 function show_news()
{
var news = document.getElementById(news) ;
var files = document.getElementById(files) ;
news.style.display = "block";
files.style.display = "none";
}

function show_files()
{
var news = document.getElementById(news) ;
var files = document.getElementById(files) ;
files.style.display = "block";
news.style.display = "none";
}
</script>
</head>
<body>

<ul><li><a href="#" onclick="show_news()">SHOW_NEWS</a></li><li><a href="#" onclick="show_files()">SHOW_FILES</a></li></ul>

<div id="news">
NEWS
</div>
<div id="files" style="display: none;">
FILES
</div>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 29.11.2010, 00:31
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Как вариант для размышления:
<script type="text/javascript">
window.onload = function(){
     var a = document.getElementsByTagName('a'), i = a.length;
     while(i--){
          a[i].onclick = function(i){
             var dt = document.getElementsByTagName('dt');
              return function(){
                  dt[i].style.display = (dt[i].style.display == '') ? 'block' : '';
              };
          }(i);
     }
 };
</script>

<style type="text/css">
dl, dt, dd {margin: 0px;  padding: 0px;}
dl {border: 1px solid #DDD; float: left; margin-right: 10px; padding: 0px; width: 50px;}
dd, dt {text-align: center;}
dt {background: red; display: none; width: 50px; height: 50px;}
</style>

<dl>
    <dd><a href="#">click</a></dd>
    <dt>1</dt>
</dl>
<dl>
     <dd><a href="#">click</a></dd>
     <dt>2</dt>
</dl>

Последний раз редактировалось monolithed, 29.11.2010 в 09:42.
Ответить с цитированием
  #3 (permalink)  
Старый 29.11.2010, 09:51
Новичок на форуме
Отправить личное сообщение для toyo932_st Посмотреть профиль Найти все сообщения от toyo932_st
 
Регистрация: 28.11.2010
Сообщений: 3

Понимаешь, вот так сделать у меня получается, а чтобы в 1 кнопке сразу скрывался первый и появлялся второй нет
Ответить с цитированием
  #4 (permalink)  
Старый 29.11.2010, 09:58
Новичок на форуме
Отправить личное сообщение для toyo932_st Посмотреть профиль Найти все сообщения от toyo932_st
 
Регистрация: 28.11.2010
Сообщений: 3

Нашел решение тема офф

<script type="text/javascript"> 
	function displ(b) { 
	    for (var a = 1; a < 5; a++) document.getElementById("d" + a).style.display = "none"; 
	    document.getElementById("d" + b).style.display = "block"
	}; 
	</script> 
	<a href="javascript: displ('1')">Описание</a> | <a href="javascript: displ('2')">Свойства</a> | <a href="javascript: displ('3')">Технические характеристики</a> | <a href="javascript: displ('4')">Использование</a> 
	<div id="d1" style="display: block;">ТЕКСТ1</div> 
	<div id="d2" style="display: none;">ТЕКСТ2</div> 
	<div id="d3" style="display: none;">ТЕКСТ3</div> 
	<div id="d4" style="display: none;">ТЕКСТ4</div>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обновления изображения без перезагрузки страницы A.N.R.I jQuery 13 12.03.2018 21:18
Изменение содержания страницы без полной перезагрузки самой страни gelo Events/DOM/Window 7 29.08.2010 02:03
Работа js +php без обновления страницы Jekel Javascript под браузер 18 29.11.2009 20:17
Событие после обновления страницы ajax'ом kryzhovnik Events/DOM/Window 4 07.10.2009 22:32
Автообновление <div> без перезагрузки страницы Antihrist AJAX и COMET 14 28.07.2008 06:06