Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » jQuery » Блок комментариев с тремя кнопками

Блок комментариев с тремя кнопками


     11.01.2014    css3, html5    Все вопросы » jQuery    2742

вопрос
На данный момент у меня одна кнопка, нажав на которую открывается стандартный блок комментариев. Как мне сделать блок комментариев с тремя вкладками (нажав на одну из трех кнопок появляется один из 3-х блоков комментариев)
Код html... конечно сдесь основное внимание уделяется jQuery, но я вообще не знаю jQuery (((

<div class="com-block">
<div class="com-title">
    <a class="addcom-btn" onclick="$('#addcform').toggle();return false;"><b>Добавить комментарий</b></a>
    [comments]Комментарии[/comments]
    <div class="clr"></div>
    </div> {addcomments}
{comments}

</div>


вот картинка как бы мне хотелось:
Блок комментариев с тремя кнопками

Ответил: Aleksey-Nyaka


В main.tpl подключаешь jquery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Если уже подключено то можно пропустить.

В файле addcomments.tpl убрать всё лишнее. В самое начало добавить

<script>
(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)
</script>


В нужное место вставить
<div class="section">
    <ul class="tabs">
        <li class="current">У нас</li>
        <li>Вконтакте</li>
        <li>Фейсбук</li>
    </ul>
    <div class="box visible">
        Тут код коментов с сайта
    </div>
    <div class="box">
        Тут код коментов с контакта
    </div>
    <div class="box">
        Тут код коментов с фейсбука
    </div>
</div>


Всё должно заработать.

1 комментарий

Kota
Юзер

Kota - 11 января 2014 13:04 -

И да забыл
Стили подключи)

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх