#javascript #jquery #fadein
#javascript #jquery #fadein
Вопрос:
Что я хотел бы сделать, так это иметь список ссылок, которые будут совпадать с полем DIV. Я бы хотел, чтобы одновременно отображался только один div, а все остальные были скрыты, ЗА исключением меню ссылок.
Я понимаю, как написать код для исчезновения div, а затем для нового, но я не знаю, как его написать, чтобы он был «универсальным» для всех ссылок.
Имеет ли это смысл?
При первом входе на страницу появится страница «всплеск» (id = «всплеск»). Меню будет плавающим, и в нем будет 4-6 ссылок. Когда вы нажмете на ссылку «1», она исчезнет со страницы заставки, исчезнет на странице «один». Когда вы нажимаете ссылку «4», она исчезнет со страницы «один» и исчезнет на странице «четыре».
Может кто-нибудь помочь мне написать это так, чтобы все, что мне нужно было сделать, это назначить класс ссылке и соответствующий div? Я новичок…
Комментарии:
1. Это имело бы больше смысла с некоторой примерной разметкой.
Ответ №1:
Пример с заставкой и тремя страницами;
<div class="page" id="splash">
splash content
</div>
<div class="page" id="page1" style="display: none;">
page 1 content
</div>
<div class="page" id="page2" style="display: none;">
page 2 content
</div>
<div class="page" id="page3" style="display: none;">
page 3 content
</div>
<a href="#" onclick="switchPage(1); return false;">Page 1</a>
<a href="#" onclick="switchPage(2); return false;">Page 2</a>
<a href="#" onclick="switchPage(3); return false;">Page 3</a>
<script type="text/javascript">
function switchPage(x) {
jQuery(".page").fadeOut(600, function() { jQuery("#page" x).fadeIn(600); }
}
</script>
Комментарии:
1. вы получаете ошибку javascript? проверьте консоль javascript.
Ответ №2:
Я не оформлял это, но я думаю, что это то, что вы хотите. Вы также можете загружать страницы через ajax, но я просто создал одну страницу с разными представлениями.
Разметка:
<div id="menu">
<ul>
<li><a href="#">Splash</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
</div>
<div id="container">
<div id="splash">
Splash
</div>
<div style="display:none;">
Page 1
</div>
<div style="display:none;">
Page 2
</div>
</div>
CSS
#container > div {
position: absolute;
}
И сценарий
$(function() {
var divs = $("#container > div");
var links = $("#menu a").click(function(e) {
e.preventDefault();
var pageToShow = divs.eq(links.index(this));
if(!pageToShow.is(":hidden")) {
return;
}
divs.not(':hidden').fadeOut('slow', function() {
pageToShow.fadeIn('slow');
});
});
});
Комментарии:
1. Есть ли способ исчезнуть на странице ПОСЛЕ завершения исчезновения, чтобы они не соединялись во время процесса исчезновения? Кроме того, я мог бы иметь возможность изменять положение меню после нажатия на любую ссылку, но изменение происходит только ОДИН РАЗ, при первом щелчке. ура? нет? Пока это очень полезно. Спасибо
2. Я обновил сценарий / пример для эффекта затухания, который вы хотели. Что касается позиции, вам просто нужно выполнить некоторые базовые javascript, используя логическое значение. Итак, у вас есть переменная с именем ‘hasBeenClicked = false’, а затем при нажатии на ссылку вы устанавливаете для нее значение true. У вас есть оператор if в функции, который проверяет это значение.
3. Спасибо! Надеюсь, это должно направить меня в правильном направлении, чтобы понять это. Я успешно смог переместить меню и заставить его исчезать / исчезать при нажатии на любую ссылку, но это заставляет его перестать делать это после того, как он был нажат один раз, в первый раз. Спасибо!