[2] Вкладки в карточке товара

[yodaexolon]

В файл product.tpl добавим код

<ul id="tabs">
    <li id="current"><a href="#" title="Описание">Описание</a></li>
    <li><a href="#" title="Характеристики">Характеристики</a></li>
    <li><a href="#" title="Комментарии">Комментарии</a></li>   
</ul>

ниже описание, характеристики и комментарии вставляем в код

<div id="tab-content"> 
    <div class="b-tab-content" style="display: block;" id="Описание">
Здесь вставляем код описания товара
</div>

<div class="b-tab-content" style="display: none;" id="Характеристики">
Здесь вставляем код характеристик товара
</div>

<div class="b-tab-content" style="display: none;" id="Комментарии">
здесь комментарии и форма добавления комментариев
</div>
</div>

в конце файла добавим скрипт

{literal}
<script>
$(document).ready(function() {

    $("#tab-content .b-tab-content").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#tab-content .b-tab-content:first").fadeIn(); // Show first tab content

    $('#tabs a').click(function(e) {
        e.preventDefault();
        $("#tab-content .b-tab-content").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
    });
});
</script>
{/literal}

создаем файл tabs.css 

#tabs
{
    overflow: auto;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

#tabs li
{
    margin: 0;
    padding: 0;
    float: left;
}

#tabs a
{
    -moz-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    background: #ad1c1c;
    background:    -moz-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background:    -webkit-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background:     -ms-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background:      -o-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background:         linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    color: #fff;
    float: left;
    font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
    height: 35px;
    padding: 0 30px;
    text-decoration: none;
}

#tabs a:hover
{
    background: #c93434;
    background:    -moz-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background:    -webkit-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background:     -ms-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background:      -o-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background:         linear-gradient(220deg, transparent 10px, #c93434 10px);
}

#tabs a:focus
{
    outline: 0;
}

#tabs #current a
{
    background: #fff;
    background:    -moz-linear-gradient(220deg, transparent 10px, #fff 10px);
    background:    -webkit-linear-gradient(220deg, transparent 10px, #fff 10px);
    background:     -ms-linear-gradient(220deg, transparent 10px, #fff 10px);
    background:      -o-linear-gradient(220deg, transparent 10px, #fff 10px);
    background:         linear-gradient(220deg, transparent 10px, #fff 10px);
    text-shadow: none;
    color: #333;
}

#tab-content
{
    background-color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
    background-image: -webkit-linear-gradient(top, #fff, #ddd);
    background-image:    -moz-linear-gradient(top, #fff, #ddd);
    background-image:     -ms-linear-gradient(top, #fff, #ddd);
    background-image:      -o-linear-gradient(top, #fff, #ddd);
    background-image:         linear-gradient(top, #fff, #ddd);
    -moz-border-radius: 0 2px 2px 2px;
    -webkit-border-radius: 0 2px 2px 2px;
    border-radius: 0 2px 2px 2px;
    -moz-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    -webkit-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    padding: 30px;
}

/* Remove the rule below if you want the content to be "organic" */
#tab-content .b-tab-content
{
    min-height: 220px;
}

ну и подключаем его в index.tpl

<link href="design/{$settings->theme|escape}/css/tabs.css" rel="stylesheet" type="text/css" media="screen"/>

Взял от сюда и немного подправил )

http://pcvector.net/scripts/tabs/191-vkladki-so-skoshennymi-uglami.html

 

[Noxter]

Какая то арабская реализация...

Вот самый простой вариант реализации http://dimox.name/universal-jquery-tabs-script/

[cernos]

 

Какая то арабская реализация...
Вот самый простой вариант реализации http://dimox.name/universal-jquery-tabs-script/

+1 Использовал метод по ссылке. Получилось довольно таки хорошо. 

[Алексей Склейнов]

 

 

 

+1 Использовал метод по ссылке. Получилось довольно таки хорошо. 

+1 отличное решение... довольно просто... и красиво технически

[Юлия]

yodaexolon, огромная вам благодарность!

 

использовала ваш метод! все получилось.

 

P.S. Simpla 2.3.6