затухание всех элементов, затем затухание в выбранном - PullRequest
Новая
       5

затухание всех элементов, затем затухание в выбранном

0 голосов
/ 05 октября 2011

То, что я хотел бы сделать, это иметь список ссылок, которые будут совпадать с полем DIV. Я хотел бы, чтобы только один div показывался за раз, и чтобы все остальные были скрыты, за исключением меню ссылок.

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

Имеет ли это смысл?

Когда вы впервые зайдете на страницу, появится страница-заставка (id = "splash"). Меню будет плавающим и будет 4-6 ссылок. При нажатии на ссылку «1» страница-заставка исчезнет, ​​а на странице «один» - исчезнет. Когда вы нажимаете ссылку «4», она исчезает со страницы «один» и исчезает со страницы «четыре».

Может ли кто-нибудь помочь мне написать это, так что все, что мне нужно сделать, это назначить класс для ссылки и соответствующий div? Я новичок-флиппин ...

Ответы [ 2 ]

2 голосов
/ 05 октября 2011

Пример с заставкой и тремя страницами; 

<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 голос
/ 05 октября 2011

Я не разработал это, но я думаю, что это - это то, что вы хотите. Вы также можете загружать страницы через 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');
        });
    });
});
...