Изминение текста при нажатии на ссылку
Добрый день!Подскажите пожалуйста, как сделать чтобы при нажатии на определенную ссылку текст в блоке менялся на определенный. Делаю для того, чтобы не создавать кучку станиц по каждой теме.:) Изменение
|
Цитата:
- в обработчике заменять "текст того блока" на "определенный" |
Ну, вставить текст можно так:
<html>
<head>
</head>
<a href="#" onclick="document.getElementById('mydiv').innerHTML='Текст'">Ссылка</a>
<div id="mydiv">
</div>
</html>
Но это неудобно. Лучше сделать несколько div'ов, и при нажатии на ссылку скрывать/показывать их. Вот пример: http://learn.javascript.ru/play/T0rG7b |
Спасибо:victory:, но мне нужно чтобы все происходило в одном блоке)
|
Ну тогда, опять же, для удобства, можно использовать переменные с текстом. Вот так:
<html>
<head>
<script>
var about_bears = "Медведи - это такие крупные толстолапые звери, обитают в лесах.";
var about_lions = "Львы - это такие крупные звери из семейства кошачих, обитают в Африке.";
var about_cats = "Кошки - это такие некрупные звери из семейства кошачих, давным-давно одомашены людьми, и, следовательно, обитают даже на МКС.";
</script>
</head>
<body>
<a href="#" onclick="document.getElementById('div_for_insert').innerHTML = about_bears">Медведи</a>
<a href="#" onclick="document.getElementById('div_for_insert').innerHTML = about_lions">Львы</a>
<a href="#" onclick="document.getElementById('div_for_insert').innerHTML = about_cats">Кошки</a>
<div id="div_for_insert">
</div>
</body>
</html>
|
Огромное спасибо,и еще, ты не знаешь как к этому применить функцию FadeIn?
|
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<style>
#insert {
display: none;
}
</style>
</head>
<body>
<a href="bears" rel="insert">Ссылка 1</a>
<a href="lions" rel="insert">Ссылка 2</a>
<a href="cats" rel="insert">Ссылка 3</a>
<div id="insert"></div>
<script>
var bears = 'Медведи - это такие крупные толстолапые звери, обитают в лесах.';
var lions = 'Львы - это такие крупные звери из семейства кошачих, обитают в Африке.';
var cats = 'Кошки - это такие некрупные звери из семейства кошачих, давным-давно одомашены людьми, и, следовательно, обитают даже на МКС.';
$(function() {
var insert = $('#insert');
$('a[rel="insert"]').click(function() {
var a = $(this).attr('href');
insert.css('display', 'none').html(window[a]).fadeIn(300);
return false;
});
});
</script>
</body>
</html>
В href пишем имя переменной, значение которой будет выводится в #insert при клике. |
Блин, сори я имел ввиду первое сообщение от Erolast((там где текст хранится не в переменных ,а в блоках http://learn.javascript.ru/play/T0rG7b Вот там я хотел FadeIn
|
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<style>
.insert > div {
display: none;
}
</style>
</head>
<body>
<a href="bears" rel="insert">Bears</a>
<a href="lions" rel="insert">Lions</a>
<a href="cats" rel="insert">Cats</a>
<div class="insert">
<div id="bears">Текст о медведях</div>
<div id="lions">Текст о львах</div>
<div id="cats">Текст о кошках</div>
</div>
<script>
$(function() {
$('a[rel="insert"]').click(function() {
$('#'+$(this).attr('href')).fadeIn(300);
return false;
});
});
</script>
</body>
</html>
В href пишем id дива. |
А как сделать чтобы старые блоки скрывались?
|
|
Спасибо, и последнее, как сделать чтобы после обновления скрол остался на том же месте, тоесть страница была прокручена. Все решил надо не ссылку ,а span использовать.
|
Прокрутка страницы? Или div'а?
|
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<style>
#insert > div {
display: none;
}
</style>
</head>
<body>
<a href="bears" rel="insert">Bears</a>
<a href="lions" rel="insert">Lions</a>
<a href="cats" rel="insert">Cats</a>
<div id="insert">
<div id="bears">Текст о медведях</div>
<div id="lions">Текст о львах</div>
<div id="cats">Текст о кошках</div>
</div>
<script>
$(function() {
var insert = $('#insert');
$('a[rel="insert"]').click(function() {
insert.find('div').css('display', 'none');
insert.find('#'+$(this).attr('href')).fadeIn(300);
return false;
});
});
</script>
</body>
</html>
В href пишем id дива. |
Цитата:
|
|
| Часовой пояс GMT +3, время: 19:47. |