Показать сообщение отдельно
  #2 (permalink)  
Старый 07.11.2013, 13:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

Царь Леонид,
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <style>
    ul li {
        display:inline;
        padding-left:20px;
    }
    div.first_div {
        background-color:#ccc;
        height:200px;
        margin-top:20px;
    }
    div.second_div, .third_div, .four_div {
        background-color:#ccc;
        display:none;
        height:200px;
        margin-top:20px;
    }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script>
    $(document)
        .ready(function () {
            var li = $('[id $= tag]'),
                div = $('[class $= div]');
            li.click(function (event) {
                event.preventDefault();
                div.hide()
                    .eq(li.index(this))
                    .fadeIn(600);
            })
        });
    </script>
</head>

<body>
    <ul>
        <li><a href="#" id="first_tag">Первый</a>
        </li>
        <li><a href="#" id="second_tag">Второй</a>
        </li>
        <li><a href="#" id="third_tag">Третий</a>
        </li>
        <li><a href="#" id="four_tag">Четвертый</a>
        </li>
    </ul>
    <div class="first_div">
        <h3>Первый див</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis
            in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus.
            Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
    </div>
    <div class="second_div">
        <h3>Второй див</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis
            in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus.
            Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
    </div>
    <div class="third_div">
        <h3>Третий див</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis
            in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus.
            Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
    </div>
    <div class="four_div">
        <h3>Четвертый див</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis
            in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus.
            Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
    </div>
</body>

</html>
Ответить с цитированием