Для начала скачиваем сам скрипт и помещаем его в корень форума Подключение этого скрипта подразумевает то, что у вас уже подключен JQuery, дважды его подключать не надо. После этого идем в шаблон
Код: Выделить всё
<script type="text/javascript" src="/tabs.js"></script>
Код: Выделить всё
$(document).ready(function() {
//Действие по умолчанию
$(".tab_content").hide(); //Скрыть все содержимое
$("ul.tabs h5:first").addClass("active").show(); //Активировать первую вкладку
$(".tab_content:first").show(); //Показать первые содержание вкладке
//По щелчку события
$("ul.tabs h5").click(function() {
$("ul.tabs h5").removeClass("active"); //Удалите все "active" класс
$(this).addClass("active"); //Добавить "active" класса выбранной вкладки
$(".tab_content").hide(); //Скрыть вкладку Все содержание
var activeTab = $(this).find("a").attr("href"); //Найти относительной значение атрибута для выявления активной вкладки содержание
$(activeTab).fadeIn(); //Fade в активного содержимого
return false;
});
});
Код: Выделить всё
<ul class="tabs">
<h5>
<a href="#tab1">Заголовок первого таба</a>
</h5>
<h5 >
<a href="#tab2">Заголовок второго таба</a>
</h5>
<h5 >
<a href="#tab3">Заголовок третьего таба</a>
</h5>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
Содержимое первого таба
</div>
<div id="tab2" class="tab_content">
Содержимое второго таба
</div>
<div id="tab3" class="tab_content">
Содержимое третьего таба
</div></div>
Код: Выделить всё
$(".tab_content").hide();
Код: Выделить всё
$("ul.tabs h5:first").addClass("active").show();
Т.е. чего я хочу до вас донести ??? Главное в данном скрипте - это классы, хотите сверстать иначе, не используя дивы и
Код: Выделить всё
<h5 >
<a href="#tab3">Заголовок третьего таба</a>
</h5>
Код: Выделить всё
<div id="tab3" class="tab_content">
Содержимое третьего таба
</div>
В качестве бонуса выкладываю почти полный код блока с табами, который вы видите внизу каждой темы на нашем форуме, может так понятней будет
Код: Выделить всё
<div><div class="c-h-l"><div class="c-h-r"><div class="c-h-c"><div class="c-h-title"><h4>Дополнительные возможности</h4></div></div></div></div></div>
<div>
<div class="cp_center">
<div class="cp_title">
<ul class="tabs">
<!-- IF S_QUICK_REPLY -->
<h5 style="margin-top:0px;margin-right:0px;cursor:pointer;">
<a class="cp_left" href="#tab11">Быстрый ответ</a>
</h5><!-- ENDIF -->
<!-- IF .similar and not S_IS_BOT -->
<h5 style="margin-top:0px;margin-right:0px;cursor:pointer;">
<a class="cp_left" href="#tab12">Похожие темы</a>
</h5><!-- ENDIF -->
<h5 style="margin-top:0px;margin-right:0px;cursor:pointer;">
<a class="cp_left" href="#tab13">Оставить комментарий Вконтакте</a>
</h5>
<h5 style="margin-top:0px;margin-right:0px;cursor:pointer;">
<a class="cp_left" href="#tab14">Поделиться темой с помощью</a>
</h5>
</ul>
</div></div>
<div class="tab_container">
<!-- IF S_QUICK_REPLY -->
<div id="tab11" class="tab_content">
<form id="postform" method="post" action="{U_QR_ACTION}">
<table class="tablebg" width="100%" cellspacing="1">
<tr>
<td class="cat_online_top" colspan="2"><h4><font size="2">{L_QUICKREPLY}</font></h4></td>
</tr>
<tr>
<td class="row2" colspan="2" ><input class="post" style="width:90%" type="text" name="subject" size="45" maxlength="64" tabindex="2" value="{SUBJECT}" /></td>
</tr>
<tr>
<td class="row2" valign="top" align="left" width="100%">
<script type="text/javascript">
// <!--
var form_name = 'postform';
var text_name = 'message';
// -->
</script>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<!-- INCLUDE posting_buttons.html -->
<tr>
<td valign="top" ><textarea id="message" name="message" rows="12" cols="76" tabindex="3" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onfocus="initInsertions();" style="width: 99%;">{MESSAGE}</textarea>
<div class="cp_center" >
<div class="cp_title" >
<h5 style="margin-top:0px;margin-right:0px;cursor:pointer;">
<a class="cp_left" href="/posting.php?mode=smilies&f=138" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;" title="Добавить смайлики в свое сообщение">Добавить смайлики</a>
</h5>
<h5 style="margin-top:0px;margin-right:0px;cursor:pointer;">
<a class="cp_left" href="javascript:void(0);" onclick="window.open('http://www.postimage.org/index.php?mode=phpbb3&tpl=X-Static&lang=russian&forumurl=' escape(document.location.href), '_imagehost', 'resizable=yes,width=500,height=400');return false;" title="Нажмите на ссылку Добавить картинку(изображение), во всплывающем окне выберите изображение для загрузки, нажмите кнопку Загрузить. Ссылка на фото автоматически добавится в поле сообщения." >Добавить картинку(изображение)</a>
</h5>
<h5 style="margin-top:0px;margin-right:0px;cursor:pointer;">
<a class="cp_left" href="/styles/X-Static/template/dep.html" onclick="popup(this.href, 370, 80, '_phpbbsmilies') ; return false;" title="Загрузить любой файл на DepositFiles">Загрузить на DepositFiles</a>
</h5>
</div></div>
<br/>
<table width="100%">
<tr><td align="left">
<input type="checkbox" class="radio" name="notify"{S_NOTIFY_CHECKED} /> {L_NOTIFY_REPLY}<br/><input type="checkbox" class="radio" name="disable_magic_url"{S_MAGIC_URL_CHECKED} /> {L_DISABLE_MAGIC_URL}
</td>
<!-- IF S_USER_GROUP == 2 -->
<td align="center">
<table class="tablebg" width="100%" cellspacing="0">
<tr>
<td class="row3"><span class="gensmall">Внимание !!!</span></td>
</tr>
<tr>
<td class="row2"><span class="genmed">Уважаемый пользователь, сейчас вы состоите в группе Зарегистрированные пользователи, для которой активирован флуд-контроль в промежуток 30 минут. Это означает то, что следущее сообщение вы сможете написать лишь через 30 минут после предыдущего. Поэтому продумывайте свои сообщения. Если необходимо чтото добавить, то редактируйте уже оставленные сообщения. После того, как вы зарекомендуете себя с положительной стороны, флуд-контроль будет для вас отключен. Оставить заявку на отключение флуд-контроля можно в теме <a href="http://hello-vitebsk.ru/viewtopic.php?f=75&t=1917">[FAQ]Вступление\прием в группу Опытные пользователи</a></span></td>
</tr>
</table>
</td>
<!-- ENDIF -->
<td align="right">Количество символов
<input id="num" type="text" class="codeButtons" readonly="true" style="width:50px;text-align:center" title="Счётчик символов">
<script type="text/javascript" language="javascript">
jQuery("#message").bind('focus', function() {nc()});
jQuery("#message").bind('keydown', function() {nc()});
jQuery("#message").bind('keyup', function() {nc()});
jQuery("#message").bind('keypress', function() {nc()});
jQuery("#message").bind('change', function() {nc()});
function nc(){num = document.getElementById('message').value.length;
document.getElementById('num').value = num;}
</script><br/>Минимально 10 символов
</td></tr>
</table>
</td>
<!-- IF S_BBCODE_ALLOWED -->
<td width="80" align="center" valign="top">
<script type="text/javascript">
// <!--
colorPalette('v', 7, 6)
// -->
</script>
</td>
<!-- ENDIF -->
</tr>
</table>
</td>
</tr>
<tr>
<td class="cat" colspan="2" align="center">
<input class="btnlite" type="submit" tabindex="10" name="preview" value="{L_PREVIEW}" />
<input class="btnmain" type="submit" accesskey="s" tabindex="6" name="post" value="{L_SUBMIT} (CTRL ENTER)" />
<input class="btnlite" type="submit" accesskey="f" tabindex="7" name="full_editor" value="{L_FULL_EDITOR}" />
{S_FORM_TOKEN}
{QR_HIDDEN_FIELDS}
</td>
</tr>
</table>
</form>
</div>
<!-- ENDIF -->
<!-- IF .similar and not S_IS_BOT -->
<div id="tab12" class="tab_content">
<table class="tablebg" width="100%" cellspacing="0">
<tr>
<th width="4%" nowrap="nowrap"> </th>
<th nowrap="nowrap"> {L_SIMILAR_TOPICS} </th>
<th nowrap="nowrap"> {L_AUTHOR} </th>
<th nowrap="nowrap"> {L_REPLIES} </th>
<th nowrap="nowrap"> {L_VIEWS} </th>
<th nowrap="nowrap"> {L_LAST_POST} </th>
</tr>
<!-- BEGIN similar -->
<tr valign="middle">
<td class="row7" width="25" align="center"><!-- IF similar.TOPIC_AUTHOR_AVATAR -->{similar.TOPIC_AUTHOR_AVATAR}<!-- ENDIF --></td>
<td class="row7">
<!-- IF similar.S_UNREAD_TOPIC --><a href="{similar.U_NEWEST_POST}">{NEWEST_POST_IMG}</a><!-- ENDIF -->
{similar.ATTACH_ICON_IMG} <a href="{similar.U_VIEW_TOPIC}" class="topictitle">{similar.TOPIC_TITLE}</a><!-- IF similar.SEO_DESC_TOPIC --></br><i><strong>{similar.SEO_DESC_TOPIC}</strong></i><!-- ENDIF -->
<!-- IF similar.S_TOPIC_UNAPPROVED or similar.S_POSTS_UNAPPROVED -->
<a href="{similar.U_MCP_QUEUE}">{similar.UNAPPROVED_IMG}</a>
<!-- ENDIF -->
<!-- IF similar.S_TOPIC_REPORTED -->
<a href="{similar.U_MCP_REPORT}">{REPORTED_IMG}</a>
<!-- ENDIF -->
<!-- IF similar.PAGINATION -->
<p class="gensmall"> [ {GOTO_PAGE_IMG}{L_GOTO_PAGE}: {similar.PAGINATION} ] </p>
<!-- ENDIF -->
</td>
<td class="row7" width="100" align="center"><p class="topicauthor">{similar.TOPIC_AUTHOR_FULL}</p></td>
<td class="row7" width="50" align="center"><p class="topicdetails">{similar.TOPIC_REPLIES}</p></td>
<td class="row7" width="50" align="center"><p class="topicdetails">{similar.TOPIC_VIEWS}</p></td>
<td class="row7" width="120" align="center">
<!-- IF similar.LAST_POST_AUTHOR_AVATAR --><div style="float: left; padding-top: 0px; margin-left: 5px; margin-right: {similar.LAST_POST_AUTHOR_AVATAR_MARGIN}px;">{similar.LAST_POST_AUTHOR_AVATAR}</div><!-- ENDIF -->
<p class="topicdetails">{similar.LAST_POST_TIME}</p>
<p class="topicdetails">{similar.LAST_POST_AUTHOR_FULL}
<a href="{similar.U_LAST_POST}">{LAST_POST_IMG}</a>
</p>
</td>
</tr>
<!-- END similar -->
</table>
</div>
<!-- ENDIF -->
<div id="tab13" class="tab_content">
<table class="tablebg" width="100%" cellspacing="0">
<tr>
<td class="cat_online_top" colspan="2"><h4><font size="2">Оставить свой комментарий</font></h4></td>
</tr>
<tr>
<td/><!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="http://userapi.com/js/api/скриптик"></script>
<script type="text/javascript">
тута данные от контакта
</script>
<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
<script type="text/javascript">
тута данные от контакта
</script></td>
</tr>
</table>
</div>
<div id="tab14" class="tab_content">
<table class="tablebg" width="100%" cellspacing="0">
<tr>
<td class="cat_online_top" colspan="2"><h4><font size="2">Поделиться темой с помощью</font></h4></td>
</tr>
<tr>
<td class="row7" ><div align="center">
<div class="share42init"></div>
<script type="text/javascript" src="адресок скрипта"></script>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="c-f-l"><div class="c-f-r"><div class="c-f-c"> </div></div></div>