Техническая поддержка сервиса Quadro.Boards

Объявление

Идет поиск Хранителя форума

Новости сервиса

О форуме

Quadro.Support – это форум технической поддержки различных проектов и сервисов Quadro.Systems LLC, на котором грамотные технические специалисты всегда смогут помочь вам в решении проблем, или же подсказать ответы на самые сложные вопросы. Так же на форуме собрана обширная база знаний по различным аспектам наших сервисов. Не забывайте пользоваться поиском ;)

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Скрипты и дополнения » Контейнер с вкладками


Контейнер с вкладками

Сообщений 21 страница 40 из 44

21

LIFAD

Пруф

0

22

Lazary
Тогда исправьте это в инструкции здесь в теме:
http://uploads.ru/t/o/P/f/oPfQj.jpg

0

23

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;
}

Приведут к подобному виду:

http://uploads.ru/t/E/V/n/EVnzO.jpg

+1

24

Lazary
Вот, то что доктор прописал

0

25

Доброго времени.

http://savepic.su/1594296m.jpg

Как убрать расстояние, что на картинке показано красным? Надеюсь на помощь.

0

26

Sivorn написал(а):

Как убрать расстояние, что на картинке показано красным?

В HTML верх

Код:
<style>
#pun-announcement .html-box{
 margin-top:-43px;
}
</style>

+1

27

Герда

Добрый вечер!
Возникла следующая проблема:
При просмотре таблицы через фаерфокс эта самая табличка почему то ужасно съезжает. Можно ли исправить подобную неполадку и в чем причина?
Скрин
ссылка на форум

Отредактировано Kaori_A. (28.09.2013 18:43:01)

0

28

все-все, сообразил, пардон

Что-то я либо плохо подумал, либо плохо потыкал, друзья...
Нет ли возможности сделать кнопки не вверху, а внизу, под контентом?

Отредактировано Sirin... (20.11.2014 06:32:49)

0

29

А есть ли, все-таки, возможность сделать так, чтобы при вставке определенной ссылки ПРЯМО в объявление при нажатии на нее страждущего перекинуло на определенную вкладку? Например:
<a href="#tab3">АДМИНИСТРАЦИЯ</a>
Может, неправильно записываю, посему прошу помощи.
Нужно, чтобы при нажатии на эту ссылку пользователя перебрасывало на третью вкладку, которую в основной строке вкладок нет.

Отредактировано Sirin... (20.11.2014 14:44:18)

0

30

Sirin...
Непонятно, что надо, давайте с картинками.

0

31

sadhaka

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Необходимо, чтобы при нажатии на выделенную красным цветом ссылку пользователя перебрасывало на третью вкладку слайдера.

Отредактировано Sirin... (20.11.2014 22:58:52)

0

32

Sirin...
а где сами вкладки?

0

33

sadhaka
Если вкладки в смысле контейнеры - то они вверху, над кнопками переключения между ними.

Отредактировано Sirin... (21.11.2014 20:14:26)

0

34

Добрый вечер.
Пытаюсь вставить в пост контейнер с вкладками, однако почему-то все вкладки, кроме четвертой, не открываются.

Код

<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>

Выглядит вот так
http://i76.fastpic.ru/thumb/2015/1213/80/60a2855a27ff8847815ecd8b608d4780.jpeg - изначальный вид
http://i74.fastpic.ru/thumb/2015/1213/c8/b91878c21f872583b32e944467dacac8.jpeg - открывается только четвертая вкладка.

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

0

35

Alexandra Sforzare
поставил себе, все переключается, так что проблема где-то у вас, давайте ссылку.

0

36

Ichimaru Gin, Вот

0

37

Alexandra Sforzare
Видите ли, в чем дело. У вас стоит один и тот же код в посте и в объявлении, так нельзя. Преимущество получает код из объявления.
Когда вы активируете вкладку в посте:
<a href="#tab1">ВИЗИТКА</a>
Ссылка перекидывает нас на
<div id="tab1" class="tab_content" style="display: block;">
из объявления.
Обратили внимание, что нажатие вкладок в табличке в посте переключают вкладки в объявлении?))

Так вот, что вам надо сделать, раз уж хотите оставить и то и другое.
Пройтись по коду из поста и переименовать все пересекающиеся элементы.
Сделать это будет несложно, но нужно кропотливо посидеть.
В объявлении у вас последняя ссылка tab5 (а 4 нету, поэтому она единственная работает в посте)
Значит в посте замените tab1 на tab6.
tab2 на tab7
и так далее. Когда будете заменять, следите, чтобы номер переключателя и самого контейнера совпадали.
Принцип понятен?

А вообще, я бы не рекомендовал использовать один и тот же скрипт на странице дважды, сейчас достаточно вкладок, выполненных на чистом css, но это лирика)

0

38

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)

+1

39

Ichimaru Gin, огромное спасибо, все работает теперь. Не знала о таких нюансах, впредь буду внимательнее.

Deff, спасибо, попробую освоить на другой локационной теме =)

Отредактировано Alexandra Sforzare (14.12.2015 16:06:00)

0

40

Alexandra Sforzare
Одного прописанного мною кода в HTML низ достаточно на все таблицы с вкладками как в объявление, так и в постах(или в ином месте)
Повторно вписывать его в HTML-код каждого сообщения, - не нужно.

Отредактировано Deff (15.12.2015 00:40:49)

0


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Скрипты и дополнения » Контейнер с вкладками


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC