Единый форум поддержки

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

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


Вы здесь » Единый форум поддержки » Администрирование форума » Не ладится в таблице с перекл. вкладками.


Не ладится в таблице с перекл. вкладками.

Сообщений 1 страница 10 из 10

1

Делала по Скрипты от пользователей 3 92 сообщению табличку.

Работает всё, кроме четвертой вкладки. Не нажимается

Вот мои коды

HTML верх

Код:
<!-- Стиль меню таблицы в объявлении -->
<style type="text/css">
/****************************************
   Таблица с переключаемыми Вкладками
****************************************/
#tab2,#tab2*{
  paddibg:0;
  margin:0;
}
#tab2 {
  background:transparent url(http://savepic.org/6404313.jpg) 0 0 no-repeat;
  height:280px;
  width:785px;
  
}
#tab2,#tab2 td{
  border:none 0 transparent!important;
  border-collapse:collapse;
}
img[data^="tab"]{
  cursor:pointer;
  height:100%;
 
  border:none 0 transparent!important;
}
.tab-content {
  display:none;
  width:100%;
  height:200px;
  color:#fff;
  overflow-y:auto;
}
</style>
<script type="text/javascript">
$.fn.switch_tabs = function() {
  var tbl = this,knopK = $("img[data^='tab']",tbl);
  knopK.each(function(){
    var arr = $(this).attr('data').split(",");
    $(this).css("background-image","url("+arr[1]+")")
  }); knopK.css("background-position","120% 10000px")
      knopK.css("background-repeat","no-repeat")
  knopK.click(function(){
    knopK.removeClass('active');
    $(this).addClass('active');
    var arr = $(this).attr('data').split(",");
    tbl.css("background-image","url("+arr[1]+")")
    $(".tab-content",tbl).hide();
    $("#"+arr[0]+"",tbl).show();
  });
}
</script>

Объявление :

Код:
<div align=center>

<table id="tab2" class="tbl-0" border="0">
<tr>
<td class="butt" valign=center height=53>   <!-- Секция кнопок -->
<img width="137" data="tab-1,http://savepic.org/6360262.jpg"  src="/i/blank.gif" class="active"/>
<img width="173" data="tab-2,http://savepic.ru/6180697.jpg"  src="/i/blank.gif"/>
<img width="185" data="tab-3,http://savepic.org/6413529.jpg"  src="/i/blank.gif"/>
<img width="293" data="tab-4,http://savepic.ru/6167385.jpg"  src="/i/blank.gif"/>
<img width="293" data="tab-4,http://savepic.ru/6167385.jpg"  src="/i/blank.gif"/>
</td>
</tr>
<tr>
<td  class="content" align=center>
<!-- Новости -->
<div id="tab-1" class="tab-content"  style="display:block;">
НОВОСТИ НОВОСТИ НОВОСТИ
</div>
<!-- В игре -->
<div id="tab-2" class="tab-content">
ТЫРЫ ПЫРЫ ПАРАРАМ
</div>
<!-- О нас -->
<div id="tab-3" class="tab-content">
МЯУ И МУР МЯМЯТЬ И МУР
</div>
<!-- Важные ссылки -->
<div id="tab-4" class="tab-content">
Контент 4-й кнопки
</div>
</td>
</tr>
</table><script>$("#tab2").switch_tabs()</script><!--//End/-switch Tabs -->

Что я сделала не так? Как исправить?

0

2

Лепестянка001 написал(а):

Что я сделала не так? Как исправить?

1.в конце таблы добавить красное, ибо нет тега закрытия

</table><script>$("#tab2").switch_tabs()</script><!--//End/-switch Tabs -->
</div>

2. не отрегулированы горизонтальные размеры кнопок!
(У вас стиль кнопок вообще изъят)

img[data^="tab"]{
  cursor:pointer;
  height:100%;
  outline:solid red 1px;/* Убираем Строку после настройки*/
  border:none 0 transparent!important;
}

Затем, после регулироваки размера, он тут:

<td class="butt" valign=center height=53>   <!-- Секция кнопок -->
<img width="137" data="tab-1,http://savepic.org/6360262.jpg"  src="/i/blank.gif" class="active"/>
<img width="173" data="tab-2,http://savepic.ru/6180697.jpg"  src="/i/blank.gif"/>
<img width="185" data="tab-3,http://savepic.org/6413529.jpg"  src="/i/blank.gif"/>

Красное - убираем
=====================
А зачем вкладок 4, а кнопок - 5 ?

Отредактировано Deff (Вт, 4 Ноя 2014 14:46:42)

0

3

Боже! Спасибо огромное! Битый час стараюсь это победить, и никак)
Всё вышло, спасибо!!

0

4

Доброго времени суток!

У меня тоже возникла проблема с данной таблицей.
Форум
Вроде бы все делала по инструкции, но никак не могу избавиться от светло-серых рамок вокруг вкладок и линий внизу, сбоку и сверху от таблицы (пометила на скрине стрелками)

И что примечательно:
в хроме и сафари - вижу эти рамки и линии
в лисе - вкладки вообще не переключаются
в ие и опере - видны только линии внизу, сбоку и сверху таблицы

Скрины 1

http://sf.uploads.ru/wnYa9.png
http://sf.uploads.ru/JjUfa.png
http://sf.uploads.ru/5iEVA.png

И еще вопрос: не могу понять, как уменьшить расстояние между панелью пользовательских ссылок и данной таблицей? (на скрине пометила красной рамкой)

Скрин 2

http://sf.uploads.ru/9MqQy.png

Помогите, пожалуйста! И заранее благодарю=)

Отредактировано HeleVS (Пт, 26 Дек 2014 02:18:55)

0

5

HeleVS
1. Откройте картинку http://forumstatic.ru/files/0014/b5/91/30479.gif ФШ на темном фоне при большом увеличении, у Вас пиксельные необрезанные остатки белых линий (Снизу и слево сверху)(у последней картинки та же песня слево сбоку, лучше их выстроить в ФШ слоями друг над другом с идентичными типоразмерами и выключая все слои, кроме единственного, сохранять по одной, ибо у Вас и пиксельные размеры гуляют)
2.
Нахрена Вы сокращаете исходный код! ?(Потому и не работает в Лисе! Потому там и обводка картинки, как отсутствующей!) Куда делось красное ?

Свернутый текст

<div align="center">
<table id="tab2" class="tbl-0" border="0">
<tr>
<td class="butt" valign="center" height="45">   <!-- Секция кнопок -->
<img width="195" data="tab-1,http://forumstatic.ru/files/0014/b5/91/30479.gif" class="active" src="/i/blank.gif">
<img width="195" data="tab-2,http://forumstatic.ru/files/0014/b5/91/64890.gif" src="/i/blank.gif">
<img width="195" data="tab-3,http://forumstatic.ru/files/0014/b5/91/72083.gif" src="/i/blank.gif">
<img width="195" data="tab-4,http://forumstatic.ru/files/0014/b5/91/31712.gif" src="/i/blank.gif">
<img width="195" data="tab-5,http://forumstatic.ru/files/0014/b5/91/52225.gif" src="/i/blank.gif">
</td>
</tr>
<tr>
<td class="content" align="center">
<!-- Контейнер контента 1-й кнопки -->
<div id="tab-1" class="tab-content" style="display:block;">
Контент 1-й кнопки
</div>
<!-- Контейнер контента 2-й кнопки -->
<div id="tab-2" class="tab-content">
Контент 2-й кнопки
</div>
<!-- Контейнер контента 3-й кнопки -->
<div id="tab-3" class="tab-content">
Контент 3-й кнопки
</div>
<!-- Контейнер контента 4-й кнопки -->
<div id="tab-4" class="tab-content">
Контент 4-й кнопки
</div>
<!-- Контейнер контента 5-й кнопки -->
<div id="tab-5" class="tab-content">
Контент 5-й кнопки
</div>
</td>
</tr>
</table><script>$("#tab2").switch_tabs()</script><!--//End/-switch Tabs -->
</div>

3. Если убирать   outline:1px solid red; - то целиком строку!
Итоговый стиль:

<!-- Стиль меню таблицы в объявлении -->
<style type="text/css">
/****************************************
   Таблица с переключаемыми Вкладками
****************************************/
#tab2,#tab2*{
  paddibg:0;
  margin:0;
  border:none 0!important;
}
#tab2 {
  background:transparent url(http://forumstatic.ru/files/0014/b5/91/30479.gif) 0 0 no-repeat;
  height:200px;
  width:1000px;
}
#tab2,#tab2 td{
  border:none 0!important;
  border-collapse:collapse;
}
img[data^="tab"]{
  cursor:pointer;
  height:100%;
  border:none 0!important;
}
.tab-content {
  display:none;
  width:100%;
  height:155px;
  overflow-y:auto;
}
</style>

Отредактировано Deff (Пт, 26 Дек 2014 12:58:59)

0

6

Deff
Каюсь, грешна - накосячила я не кисло  o.O
Большое Вам спасибо за оперативный и развернутый ответ.
Все сделаю, как Вы сказали, как только доберусь до дома.
С наступающими Вас праздниками!

0

7

HeleVS
:D Гы, Стиль то Вы заменили, код кнопки поправили, а сам скрипт переключатель - удалили...
Поставьте сразу после стиля таблички в HTML верх:

<script type="text/javascript">
$.fn.switch_tabs = function() {
  var tbl = this,knopK = $("img[data^='tab']",tbl);
  knopK.each(function(){
    var arr = $(this).attr('data').split(",");
    $(this).css("background-image","url("+arr[1]+")")
  }); knopK.css("background-position","120% 10000px")
      knopK.css("background-repeat","no-repeat")
  knopK.click(function(){
    knopK.removeClass('active');
    $(this).addClass('active');
    var arr = $(this).attr('data').split(",");
    tbl.css("background-image","url("+arr[1]+")")
    $(".tab-content",tbl).hide();
    $("#"+arr[0]+"",tbl).show();
  });
}
</script>

Отредактировано Deff (Пт, 26 Дек 2014 15:02:21)

0

8

:crazyfun:
Случайно получилось так=) торопилась на корпоратив.
Ну, спасибо Вам большое еще раз.
Осталось переделать картинки и все будет норм.
Респект!

+1

9

/****************************************
   Таблица с переключаемыми Вкладками
****************************************/
#tab2,#tab2*{
  paddibg:0;
  margin:0;
  border:none 0!important;
}
#pun-ulinks .container{
  padding-bottom:34px;
}

#tab2 {
  margin-top:-24px;
  background:transparent url(http://forumstatic.ru/files/0014/b5/91/38511.gif) 0 0 no-repeat;
  height:200px;
  width:1000px;
}
#ta

Добавьте к стилю таблицы строки красным (Не помню, кажется Вы просили подвинуть таблицу

Отредактировано Deff (Сб, 27 Дек 2014 14:06:59)

0

10

Да, спасибо, просила =)
Постеснялась спросить во второй раз...

0


Вы здесь » Единый форум поддержки » Администрирование форума » Не ладится в таблице с перекл. вкладками.