как настроить вкладки на сайте?

panov 29.03.2015 Все вопросы » Стили (CSS) 2374

вопрос

нужно решить проблемы с вкладками: надо чтобы при нажатии на вкладку она переключалась но не переносилось положение страницы

посмотрите Вкладка 1 Вкладка 2

http://cine-ma.ru/boevik/11-avatar-avatar-2009.html

Ответил: FerrumNST

Вот самый простой:
Создаем файл tabs.css


.section {
    width: 100%;
    background: #EFEFEF;
    margin: 0 0 30px;
}
ul.tabs {
    height: 28px;
    line-height: 25px;
    list-style: none;
    border-bottom: 1px solid #DDD;
    background: #FFF;
}
.tabs li {
    float: left;
    display: inline;
    margin: 0 1px -1px 0;
    padding: 0 13px 1px;
    color: #777;
    cursor: pointer;
    background: #F9F9F9;
    border: 1px solid #E4E4E4;
    border-bottom: 1px solid #F9F9F9;
    position: relative;
}
.tabs li:hover,
.vertical .tabs li:hover {
    color: #F70;
    padding: 0 13px;
    background: #FFFFDF;
    border: 1px solid #FFCA95;
}
.tabs li.current {
    color: #444;
    background: #EFEFEF;
    padding: 0 13px 2px;
    border: 1px solid #D4D4D4;
    border-bottom: 1px solid #EFEFEF;
}

Создаем файл tabs.js


(function($) {
$(function() {

    $('ul.tabs').on('click', 'li:not(.current)', function() {
        $(this).addClass('current').siblings().removeClass('current')
            .parents('div.section').find('div.box').eq($(this).index()).fadeIn(150).siblings('div.box').hide();
    })

})
})(jQuery)

Закидываем по нужным папкам

Подключаем в шаблоне:

 <link media="screen" href="ПУТЬ К ФАЙЛУ /tabs.css" type="text/css" rel="stylesheet" />
 <script type="text/javascript" src="ПУТЬ К ФАЙЛУ/tabs.js"></script>

И выводим в нужном месте шаблона:


<ul class="tabs">
        <li class="current">Главная</li>
        <li>Услуги</li>
        <li>Третья вкладка</li>
        <li>Червертая вкладка</li>
    </ul>

    <div class="box visible">
        <p>
1 Вкладка
</p>
    </div>

<div class="box"><p>
2 Вкладка
</p></div>

    <div class="box"><p>
3 Вкладка
</p></div>

    <div class="box"><p>
4  Вкладка
</p></div>

3 комментария

Юзер

250

golden_eagle_god - 2014-12-1329 марта 2015 17:26 - #42657

Вы что используете для генерации вкладок (например Jquery Tabs)? Или у вас свои? Если свои, то нужно в событии клика, в конце поставить return false, чтоб отменить "настоящую функцию клика". А вообще, на будущее, выкладывайте код :)

Юзер

104

panov - 2014-12-1331 марта 2015 10:23 - #42722

 <div class="tabsLink">
        <a href="#tab1">Вкладка 1</a>
        <a href="#tab2">Вкладка 2</a>
        </div>
        
        <br>
        <a class="tabs" id="tab1"></a>
        <div class="tab">
        <div id="my-player"></div>
<script>
getplayer( "[xfvalue_revideo]", "[xfvalue_video]", "400", "600", "KT", "[xfvalue_embed]", "/uploads/thumbs/[xfvalue_thumb]", "{title}", "[xfvalue_playlist]"  );
</script>
 <br>
        </div>
        
        <a class="tabs" id="tab2"></a>
        <div class="tab">
    Вкладка 2 <br>
        </div>

.tabs {
    opacity: 0;  /* Прозрачность */
    visibility: hidden; /* Изначально - спрятан */
}.tab{
    position:absolute; /* Абсолютное позиционирование */
    visibility: hidden;    /* Изначально - спрятан */
    z-index: 10;    /* z-index */
    color:#478CFB; /* Цвет */
    font: bold 12pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Толщина, размер и семейство шрифта */
}
.tabs:target+.tab {
    opacity: 1; /* Убирает прозрачность */
    visibility: visible; /* Делает видимым */
}
.tabsLink a{
    background-color:#1f2637; /* Цвет */
    padding:5px; /* Внутренние отступы */
    font: bold 12pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Толщина, размер и семейство шрифта */
    color:#fff; /* Цвет */
    text-decoration:none; /* Отсутствие нижней линии */
    
    /* Округление старт */
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* Округление конец */
}

Юзер

250

golden_eagle_god - 2014-12-1331 марта 2015 11:12 - #42729

JS в этих вкладках отсутствует. Ну здесь тогда 2 пути. Или резализовать вкладки через JS (плагинов много, например Jquery UI Tabs, ну или самому написать, не сложно), или попробовать переверстать эти как UL -> LI (но мне кажется толку не будет)