Комментарии во вкладках, где то ошибка

filimon 07.10.2012 комментарии, вкладки Все вопросы » Общие вопросы по вёрстке 4027

вопрос

Поставил комментарии во вкладках,на двух сайтах встало хорошо, на одном нет.
Код один и тот же.Вот код:

<ul class="tabs">
    <li><a href="#tab1">Комментарии</a></li>
    <li><a href="#tab2">Facebook</a></li>
    <li><a href="#tab3">Vkontakte</a></li>
    </ul>
    
    <div class="tab_container">
    
    <div id="tab1" class="tab_content">
    {addcomments}
    {comments}
    </div>
    
    <div id="tab2" class="tab_content">
    
<div class="fb-comments" data-href="{full-link}" data-num-posts="5" data-width="460"></div>
    </div>
    
    <div id="tab3" class="tab_content">
    //тут ниже ниже необходимо вставить свои код полученный на Vkontakte
    
    <!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?64"></script>

<script type="text/javascript">
  VK.init({apiId: 3162600, onlyWidgets: true});
</script>

<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 5, width: "460", attach: "*"});
</script>
    </div>
    </div>

Так на двух сайтах:

Что получилось на одном:

Вопрос : где ошибка или что надо поменять?
Спасибо.

Ответа пока нет

13 комментариев

Юзер

OKyJIucT - 2015-05-137 октября 2012 22:37 - #7772

без ссылки на сайт сложно дать однозначный ответ. я думаю, вы просто где то в css стилях перед кодом, отвечающим за отображение ваших комментариев, пропустили закрывающий "}" либо вообще стили не вставили.

Юзер

Захар - 2015-05-138 октября 2012 00:36 - #7774

ты в comments.tpl лишний код нафигачил.

Юзер

181

Mr. Hyde - 2015-05-138 октября 2012 07:25 - #7777

JS неправильно подключил.

PHP-developer

1783

Sander - 2015-05-138 октября 2012 12:32 - #7796

А почему никто не подумал о таком простом варианте как стили? )
Наверняка не перенесены эти стили:

.tabs
.tab_container
.tab_content

SanDev.pro - мой блог.

Telegram: @sandev
Skype: Sander8804

Юзер

OKyJIucT - 2015-05-138 октября 2012 14:16 - #7798

Ну почему же никто) я в первом комментарии об этом сказал:)

Юзер

181

Mr. Hyde - 2015-05-138 октября 2012 17:20 - #7804

При подключенном js все табы кроме первого будут скрыты. А тут мы видим, что все блоки открытые. Значит ни js, ни css не подключены.

Юзер

filimon - 2015-05-138 октября 2012 16:57 - #7800

Вот CSS:

Показать / Скрыть текст

ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px; /*--Высота вкладок--*/
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 100%;
    }
    ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 31px; /*--Добавте 1px с высоты списку--*/
    line-height: 31px; /*--Вертикально выравнивает текст в закладке--*/
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px; /*--Вытяните список вниз на 1px--*/
    overflow: hidden;
    position: relative;
    background: #e0e0e0;
    }
    ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff; /*--1px белой границы внутри списка--*/
    outline: none;
    }
    ul.tabs li a:hover {
    background: #ccc;
    }
    html ul.tabs li.active, html ul.tabs li.active a:hover {
    background: #fff;
    border-bottom: 1px solid #fff;
    }
    
    .tab_container {
    border: 1px solid #999;
    border-top: none;
    overflow: hidden;
    clear: both;
    float: left; width: 100%;
    background: #fff;
    }
    .tab_content {
    padding: 20px;
    font-size: 1.2em;
    }

Помучил немного вкладки встали как на первом скрине,но отображаются все вкладки вместе...

Юзер

filimon - 2015-05-138 октября 2012 17:12 - #7801

Вот как выглядит: смотреть

Юзер

filimon - 2015-05-138 октября 2012 17:34 - #7806

В файле main.tpl шаблона перед тегам </head> вставил следующее:

Показать / Скрыть текст

<script type="text/javascript">
    $(document).ready(function() {
    
    //Настройки по умолчанию
    $(".tab_content").hide(); //Скрыть все содержимое
    $("ul.tabs li:first").addClass("active").show(); //Активировать первую вкладку
    $(".tab_content:first").show(); //Показать первые содержание вкладке
    
    //Действие при клике
    $("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active"); //добавить класс "active" к выбраной вкладке
    $(".tab_content").hide(); //Скрыть вкладку и ее содержание
    var activeTab = $(this).find("a").attr("href"); //Найти значение атрибута для выявления активной вкладки с содержанием
    $(activeTab).fadeIn(); //
    return false;
    });
    
    });
    </script>