Подскажите как сделать вкладки.

Обсуждение CMS Made Simple в России.

Moderators: iturbay, wdwp

Post Reply
misa
New Member
New Member
Posts: 1
Joined: Mon May 16, 2016 9:29 am

Подскажите как сделать вкладки.

Post by misa »

Подскажите пожалуйста, как сделать чтобы данный код работал на странице сайта

Code: Select all

<style>
.notebook2 {
    width: 640px;
    height: 450px;
    position: relative;
}

.notebook2 > input {
    display: none;
}

.notebook2 > div {
    position: absolute;
    box-sizing: border-box;
    top: 30px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    border-radius: 10px;
    padding: 0px 1em;

    z-index: 0;
    background-color: #666;

    transition: all 0.5s ease 0s, z-index 0s 0.5s;
}

.notebook2 > div > *:first-child {
    display: block;
    position: absolute;
    box-sizing: border-box;
    top: -30px;
    width: 150px;
    height: 30px;

    font-family: Arial;
    font-size: 13px;

    border-radius: 10px 10px 0px 0px;
    background-color: inherit;

    color: #fff;
    line-height: 28px;
    cursor: pointer;
    text-align: center;

    transition: all 0.5s ease 0s;
}

.notebook2 > div > *:not(:first-child) {
    opacity: 0;
    transition: all 0.5s ease 0s;
}

.notebook2 > div:nth-of-type(1) > *:first-child { left: 20px; }
.notebook2 > div:nth-of-type(2) > *:first-child { left: 170px; }
.notebook2 > div:nth-of-type(3) > *:first-child { left: 320px; }
.notebook2 > div:nth-of-type(4) > *:first-child { left: 470px; }

.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4) {
    z-index: 10;
    background-color: #ccc;
    transition: all 0.5s ease 0.5s, z-index 0s 0.5s;
}

.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:first-child,
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:first-child,
.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3) > *:first-child,
.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4) > *:first-child {
    color: #333;
    transition: all 0.5s ease 0.5s;
}

.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:not(:first-child),
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:not(:first-child),
.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3) > *:not(:first-child),
.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4) > *:not(:first-child) {
    opacity: 1;
    transition: all 0.5s ease 0.5s;
}

</style>

<div class="notebook2">
    <input type="radio" name="notebook2a" id="notebook2a_1" checked="checked">
    <input type="radio" name="notebook2a" id="notebook2a_2">
    <input type="radio" name="notebook2a" id="notebook2a_3">
    <input type="radio" name="notebook2a" id="notebook2a_4">

    <div>
        <label for="notebook2a_1">Первая вкладка</label>
        <p>Это первая вкладка с котом.</p>
        <p><img src='https://lh3.googleusercontent.com/-6ac0fJDitng/VekGjxXrAZI/AAAAAAAAAUM/svkfw3ICSqA/s400-Ic42/1656410_6222d0c3.jpg'></p>
    </div>
    <div>
        <label for="notebook2a_2">Вторая вкладка</label>
        <p>Это вторая вкладка с лисой</p>
        <p><img src='https://lh3.googleusercontent.com/-iVaTOyL6ZNw/VekGjo3YHLI/AAAAAAAAAUQ/r-GTiK3m1wk/s400-Ic42/WL_M_F_003.jpg'></p>
    </div>
    <div>
        <label for="notebook2a_3">Третья вкладка</label>
        <p>Это третья вкладка с волком.</p>
        <p><img src='https://lh3.googleusercontent.com/-4cateiSadRE/VekGwBksb-I/AAAAAAAAAUY/4WrLlsRJPKk/s400-Ic42/wpapers_ru_%2525D0%252592%2525D0%2525BE%2525D0%2525BB%2525D0%2525BA-%2525D0%2525BD%2525D0%2525B0-%2525D1%252584%2525D0%2525BE%2525D0%2525BD%2525D0%2525B5-%2525D0%2525BD%2525D0%2525B5%2525D0%2525B1%2525D0%2525B0.jpg'></p>
    </div>
    <div>
        <label for="notebook2a_4">Четвертая вкладка</label>
        <p>Это четвёртая вкладка с рысью</p>
        <p><img src='https://lh3.googleusercontent.com/-VbI7_zCH-Eg/VekG8CK_t5I/AAAAAAAAAUg/ZuexmL-1lT8/s400-Ic42/2.jpg'></p>
    </div>
</div>
User avatar
guro
Power Poster
Power Poster
Posts: 985
Joined: Thu Apr 26, 2012 8:38 pm
Location: Ramenskoe

Re: Подскажите как сделать вкладки.

Post by guro »

А если его просто разместить в контенте страницы он не работает?
Post Reply

Return to “Russian - русский”