LIFAD
Техническая поддержка сервиса Quadro.Boards |
Новости сервиса |
О форуме
Quadro.Support – это форум технической поддержки различных проектов и сервисов Quadro.Systems LLC,
на котором грамотные технические специалисты всегда смогут помочь вам в решении проблем, или же подсказать ответы на самые сложные вопросы.
Так же на форуме собрана обширная база знаний по различным аспектам наших сервисов. Не забывайте пользоваться поиском ;)
|
Полезные ссылки |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Техническая поддержка сервиса Quadro.Boards » Скрипты и дополнения » Контейнер с вкладками
LIFAD
LIFAD
Подобные изменения:
ul.tabs { margin: 0; padding: 0; list-style: none; height: 30px; width: 780px; text-align: center; } ul.tabs li { display: inline-block; width: 320px; text-align: center; margin: 0; padding: 0; height: 30px; line-height: 40px; border: 0px; margin-bottom: -2px; overflow: hidden; position: relative; }
Приведут к подобному виду:
Lazary
Вот, то что доктор прописал
Как убрать расстояние, что на картинке показано красным?
В HTML верх
<style> #pun-announcement .html-box{ margin-top:-43px; } </style>
Герда
Добрый вечер!
Возникла следующая проблема:
При просмотре таблицы через фаерфокс эта самая табличка почему то ужасно съезжает. Можно ли исправить подобную неполадку и в чем причина?
Скрин
ссылка на форум
Отредактировано Kaori_A. (28.09.2013 18:43:01)
Что-то я либо плохо подумал, либо плохо потыкал, друзья...
Нет ли возможности сделать кнопки не вверху, а внизу, под контентом?
Отредактировано Sirin... (20.11.2014 06:32:49)
А есть ли, все-таки, возможность сделать так, чтобы при вставке определенной ссылки ПРЯМО в объявление при нажатии на нее страждущего перекинуло на определенную вкладку? Например:
<a href="#tab3">АДМИНИСТРАЦИЯ</a>
Может, неправильно записываю, посему прошу помощи.
Нужно, чтобы при нажатии на эту ссылку пользователя перебрасывало на третью вкладку, которую в основной строке вкладок нет.
Отредактировано Sirin... (20.11.2014 14:44:18)
Sirin...
Непонятно, что надо, давайте с картинками.
sadhaka
Необходимо, чтобы при нажатии на выделенную красным цветом ссылку пользователя перебрасывало на третью вкладку слайдера.
Отредактировано Sirin... (20.11.2014 22:58:52)
Sirin...
а где сами вкладки?
sadhaka
Если вкладки в смысле контейнеры - то они вверху, над кнопками переключения между ними.
Отредактировано Sirin... (21.11.2014 20:14:26)
Добрый вечер.
Пытаюсь вставить в пост контейнер с вкладками, однако почему-то все вкладки, кроме четвертой, не открываются.
<center>
<div style="width: 90%; height: auto; padding: 4px; background: black url(http://obscurilateris.f-rpg.ru/files/00 … /69393.jpg); border: 5px solid #d2aaaa;">
<div style="width: 85%; height: auto; padding: 6px; background: black url(http://obscurilateris.f-rpg.ru/files/00 … /93194.jpg); repeat top center fixed">
<div style="width: 85%; height: auto; font-family: Georgia; font-size: 35px; color: #000000; letter-spacing: 3px;" >ЦЕРКОВЬ НАСИЛИЯ</div>
<div style="width: 85%; height: auto; font-family: Georgia; font-size: 15px; color: #000000; letter-spacing: 3px;" >
<center>.. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. </center>
<b><i> <center>
В молчанье здешней тишины
<br>
Нет одиночества... Ты знаешь:
<br>
Здесь мертвые погребены,
<br>
Которых ты не забываешь. </center>
</i></b>
<center>.. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. </center>
</div><div class="container">
<div class="html-box">
<br>
<ul class="tabs">
<li class="active"><a href="#tab1">ВИЗИТКА</a></li>
<li class=""><a href="#tab2">ОПИСАНИЕ ЛОКАЦИИ</a></li>
<li class=""><a href="#tab3">ПРАВИЛА ЛОКАЦИИ</a></li>
<li class=""><a href="#tab4">NPC</a></li>
<li class=""><a href="#tab5">РАДИОПРИЕМНИК</a></li>
</ul><div class="tab_container">
<!----------------------------Контейнер Визитки------------------------------->
<div style="display: block;" id="tab1" class="tab_content">
<table width="100%">
<tbody>
<tr>
<td width="33%">
<center><h5> ЦЕРКОВЬ НАСИЛИЯ</h5>
<p>
<br>
На Темной стороне не существует понятия "отшиб" или "пригород", но если бы это было так, то именно там и расположилась бы эта обитель тишины и покоя. Служители культа не гонятся за уединением, но и не особо приветствуют гостей, которые случайно или преднамеренно забредают в их церковь.
<br><br>
Церковный крест видно за несколько метров, если ехать по юго-западному шоссе. Да-да, именно тому, которое пролегает по пустошам через "Мертвую зону". Говорят, церковники развлекаются тем, что отстреливают особо зазевавшихся путников, принимая за нечисть, вылезшую из мертворожденных селений.
Здание церкви потрепано годами и постоянно находится на капитальном ремонте, служители с периодичностью пытаются его белить, приводить в порядок, и даже высаживать скудные насаждения вокруг церкви, но они постоянно вытаптываются досужими посетителями.
<br><br>
</p>
</center>
</td>
<td width="33%">
<center>
<img src=" http://i71.fastpic.ru/big/2015/0821/a5/ … t;/img>
</center>
</td>
<td width="33%">
<center><h5>ДОСТУПНЫЕ КВЕСТЫ:</h5>
<br>
• <a href="Ссылка на квест">Квест 1</a>.
<br>
• <a href=" Ссылка на квест ">Квест 2</a>.
<br><br>
</center>
</td>
</tr>
</tbody>
</table>
</div>
<!----------------------------Конец контейнера Визитки------------------------------->
<!----------------------------Контейнер Описания локации------------------------------->
<div style="display: none;" id="tab2" class="tab_content">
<font-family="Georgia"> <i> <center>
<br> Тяжелые двери почти постоянно закрыты, скучающий обыватель может попробовать выковырять из них пару пуль крупного калибра, если, конечно, ему дадут подобраться к строению. Обитатели Церкви Насилия не любят посторонних, сказать по правде, попасть внутрь здания можно только "скорешившись" с кем-нибудь из служителей. Потому на двери, рядом с жестянкой для пожертвований и среди голубиного дерьма, болтается листок с надписью "Новичкам здесь не рады..." Служители культа вообще хотели написать пару угроз и предупреждений прямо на стене или дверях, но Святой Отец запретил подобный вандализм.
<br> Особо невнимательным, упрямым и самоуверенным позицию церкви быстро разъяснит <b>
брат Мэнс</b>, который частенько принимает солнечные ванны в компании своей любимицы "Барбары M82" и пары тройки "горящих голубей".
<br> Если же вам все-таки очень хочется "приобщиться к культуре" этого сомнительного заведения, и проникнуться данным вероисповеданием, то стоит попытаться найти задний вход, где-то со стороны <a href="http://i65.fastpic.ru/big/2015/0821/9d/a0822fd1e6120fe367c55f6d8434dc9d.png"> кладбищенского дворика </a>, за которым служители ухаживают куда более тщательно, чем за своим приходом.
<br> Роль "садовника" выполняет <b>брат Джозеф</b>, которого чаще всего можно встретить у четвертого надгробия, да-да, того самого, с надписью "Джон Доу" и стершимися годами жизни и смерти. От этого надгробия ближе всего с подсобному сарайчику, заросшему диким виноградом, в котором святой брат и обитает и к его кустарной делянке.
<br><a href="http://i68.fastpic.ru/big/2015/0821/9e/ecc91c3ba2b1aaed210db6f57fe4439e.png"> Внутри церковь</a> не отличается ничем особенным - канонические статуи ангелов, витражи сына божьего с дробовиком и святой девы с бензопилой, граффити святого писания на хорах и скамьях, свечи вокруг минометных снарядов.
<br> Каждый день, в Церкви ведется служба, если у вольных стрелков появляется желание причаститься, или отпустить грехи, то им всегда придет на помощь единственный "компетентный" святой отец в соборе. Можно, конечно, обратиться к "святой сестре", но вряд ли она будет отличаться столь же незаурядным терпением и сочувствием. В любой день <b>Отец Сэмюэль </b> отпустит вам все грехи, и еще пяток на дорожку авансом, и благословит на новое дело.
Если углубиться дальше, в кельи и "служебные помещения" Церкви, то можно обнаружить уютные ниши и закутки для уединения и молитвы. Частенько там можно встретить третьего из церковных ангелов - <b>брата Малика</b> или <b>сестру Алекс</b>, пока единственную женщину на территории этой обители покоя. Они с удовольствием поддержат с вами разговор, разопьют пару бутылочек спиртного, выкурят отборной дури брата Джо, почитают моральный кодекс наемника, или же помогут договориться о купле-продаже чего-либо незаконного.
<br>Разумеется, все вопросы решаются только через "старика Сэма", но лишний голос в вашу пользу не помешает, не так ли?
</center> </i></font-family>
</div>
<!----------------------------Конец контейнера Описания локации ------------------------------->
<!----------------------------Контейнер Правил локации -------------------------------><div style="display: none;" id="tab3" class="tab_content">
<center><li><span>ПРАВИЛА ЛОКАЦИИ</span></li>
<i><b>Чтобы попасть в Церковь: </b></i>
<br> 1. Вы должны быть наемником\вольным стрелком, на крайний случай другом\корешем служителя.
<br> 2. У вас должны водиться деньги, или иной эквивалент.
<br> 3. Брат Мэнс должен быть в хорошем настроении.
<br> Новичков Церковь не приемлет, не принимает и расстреливает в мясной фарш, которым кормит собак из соседнего приюта.
<br> Все заказы, просьбы и требования кладите в ящик для пожертвований.
</center>
</div>
<!----------------------------Конец контейнера Правил локации ------------------------------->
<!----------------------------Контейнер NPC ------------------------------->
<div style="display: none;" id="tab4" class="tab_content">
<center>
<td style="font-family: georgia; background-color: #3f454f; color: #bababa; font-size: 12px; padding: 1px;" >
<a href="ссылка на квенту" class="sbla1"> SAMUEL SILVER</a>
<a href="ссылка на квенту" class="sbla1">JOSEF</a>
<a href="ссылка на квенту" class="sbla1">MALIC</a>
<a href="ссылка на квенту" class="sbla1">MANS</a>
</td>
</center>
</div>
<!----------------------------Конец контейнераNPC ------------------------------->
<!----------------------------Контейнер радиостанции ------------------------------->
<div style="display: none;" id="tab5" class="tab_content">
<center>
<b>МАГНИТОФОН ДЖО</b>
<br>
</center>
</div>
<!----------------------------Конец контейнера радиостанций ------------------------------->
</div>
<!-- закрывающий тег--><style>
ul.tabs {
margin: 0;
text-align: center;
width: 100%;
text-transform: uppercase;
font-weight: bold;
}
ul.tabs li {
display: inline;
margin: 0;
padding: 0;position: relative;
z-index: 0;
}
ul.tabs li a {
display: inline-block;
padding: 0 20px;
outline: none;
border-radius: 8px 8px 0 0;
height: 24px;
line-height: 24px;
background-color: #b4b4b4;
background: url(http://obscurilateris.f-rpg.ru/files/00 … /31994.png);
border: 1px solid transparent;
color: #d1d1d1;
text-shadow: 1px 1px 1px #909090;
}
ul.tabs li a:hover {
background: # aeaeae;
border: 1px solid # cfcfcf;
color: # ffffff;
}
html ul.tabs li.active a, html ul.tabs li.active a:hover {
color: #fce1e1;
background: #cccccc;
border: 1px solid #7e7e7e;
border-bottom-color: transparent;
text-shadow: 1px 1px 3px #581313;
}
.tab_container {
clear: both;
float: left;
width: 100%;
background: #735f5f;
background: url(http://obscurilateris.f-rpg.ru/files/00 … /31994.png) #fff top center repeat;
border-radius: 0 px;
box-shadow: 0 0 10px #720f0f;
}
.tab_content {
padding: 1.2em;
}#ams {
border-left: 1px dashed # ff0000;
padding-left: 1em !important;
width: 200px;
}ul.navig {
text-align: center;
-webkit-columns: 4;
-moz-columns: 4;
columns: 4;
}ul.navig li a {
display: block;
background-color: # 90908e;
margin: 3px 0;
padding: 2px 3px;
border-radius: 3px;
}ul.navig li a:hover {
background-color: # c1c1c1;
}
a.sbla1:link, a.sbla1:visited {
display: block;
width: auto;
margin-bottom: 1px;
height: auto;
font-size: 18px;
font-style: normal;
font-weight: normal;
opacity: 1.0;
color: #ffffff
background: url(http://obscurilateris.f-rpg.ru/files/00 … /49250.jpg);
text-align: center;
padding: 4px 4px 4px 4px;}a.sbla1:hover, a.sbla1:active {
display: block;
height: auto;
opacity: 1.0;
font-size: 18px;
width: auto;
font-style: normal;
font-weight: normal;
background: #1d1e24;
background: url(http://obscurilateris.f-rpg.ru/files/00 … /49250.jpg);
text-decoration: none;
text-align: center;
padding: 4px 4px 4px 4px;}</style>
<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");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});</script>
</div>
</div>
</div>
</div>
</center>
Выглядит вот так
- изначальный вид
- открывается только четвертая вкладка.
Похожий контейнер в объявлениях работает.
Не пойму, где что пропустила.
Помогите, пожалуйста.
Alexandra Sforzare
поставил себе, все переключается, так что проблема где-то у вас, давайте ссылку.
Ichimaru Gin, Вот
Alexandra Sforzare
Видите ли, в чем дело. У вас стоит один и тот же код в посте и в объявлении, так нельзя. Преимущество получает код из объявления.
Когда вы активируете вкладку в посте:
<a href="#tab1">ВИЗИТКА</a>
Ссылка перекидывает нас на
<div id="tab1" class="tab_content" style="display: block;">
из объявления.
Обратили внимание, что нажатие вкладок в табличке в посте переключают вкладки в объявлении?))
Так вот, что вам надо сделать, раз уж хотите оставить и то и другое.
Пройтись по коду из поста и переименовать все пересекающиеся элементы.
Сделать это будет несложно, но нужно кропотливо посидеть.
В объявлении у вас последняя ссылка tab5 (а 4 нету, поэтому она единственная работает в посте)
Значит в посте замените tab1 на tab6.
tab2 на tab7
и так далее. Когда будете заменять, следите, чтобы номер переключателя и самого контейнера совпадали.
Принцип понятен?
А вообще, я бы не рекомендовал использовать один и тот же скрипт на странице дважды, сейчас достаточно вкладок, выполненных на чистом css, но это лирика)
Alexandra Sforzare
Замените код скриптовой части на такой:
<script type="text/javascript"> $(document).ready(function() { $(".tab_content").hide(); $("ul.tabs").each(function() { $(this).find('li:first').addClass("active").show(); $(this).next().find(".tab_content:first").show(); }); $("ul.tabs li").click(function() { var tabs = $(this).parent(); tabs.find('li').removeClass("active"); $(this).addClass("active"); tabs.next().find(".tab_content").hide(); var activeTab = $(this).find("a").attr("href"); tabs.next().find(activeTab).fadeIn(); return false; }); }); </script>
Должно работать одним скриптом для нескольких таблиц (без смены селекторов
Отредактировано Deff (14.12.2015 13:39:31)
Ichimaru Gin, огромное спасибо, все работает теперь. Не знала о таких нюансах, впредь буду внимательнее.
Deff, спасибо, попробую освоить на другой локационной теме =)
Отредактировано Alexandra Sforzare (14.12.2015 16:06:00)
Alexandra Sforzare
Одного прописанного мною кода в HTML низ достаточно на все таблицы с вкладками как в объявление, так и в постах(или в ином месте)
Повторно вписывать его в HTML-код каждого сообщения, - не нужно.
Отредактировано Deff (15.12.2015 00:40:49)
контейнер с прокруткой | Корзина | 01.12.2010 |
о форуме «Скрипты и дополнения» + навигация по скриптам | Скрипты и дополнения | 08.11.2010 |
Общие вопросы | Поток сознания | 19.09.2013 |
Мепкарта с всплывающими разделами (с) Герда | Оформление форумов | 15.06.2011 |
Общие вопросы (2) | Поток сознания | 22.06.2012 |
Вы здесь » Техническая поддержка сервиса Quadro.Boards » Скрипты и дополнения » Контейнер с вкладками