Смена содержания страницы без обновления
Нужно, чтобы когда кликаю 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>
|
Как вариант для размышления:
<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>
|
Понимаешь, вот так сделать у меня получается, а чтобы в 1 кнопке сразу скрывался первый и появлялся второй нет :(
|
Нашел решение :) тема офф
<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>
|
| Часовой пояс GMT +3, время: 01:20. |