X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Проблема с вкладками.
Pulse_hb
Pulse_hb
Topic Starter сообщение 16.5.2011, 15:08; Ответить: Pulse_hb
Сообщение #1


Хотел сделать вкладки в нутри вкладок. более яснее видна проблема на скринах.
1-я вкладка открывается нормально:
1.[IMG]http://seon.3dn.ru/1.png[/IMG]
Но со 2-й и другими проблемы, отображаются все, что должно быть скрыто во вкладках:
2.[IMG]http://seon.3dn.ru/2.png[/IMG]
Наглядный пример:
Сайт
Код вкладок:
<!-- Начало-->
<div id="tabs-1">
<div class="tabs">
<!-- Сезоны-->
<ul class="tabNavigation">
<li><a href="#1s">1 сезон</a></li>
<li><a href="#2s">2 сезон</a></li>
<li><a href="#3s">3 сезон</a></li>
<li><a href="#4s">4 сезон</a></li>
<li><a href="#5s">5 сезон</a></li>
<li><a href="#6s">6 сезон</a></li>
</ul>
<!-- 1с-->
<div id="1s" class="tab_content">
<!-- 1с серии-->
<div id="tabs">
<div id="tab-panes">
<img id="s1e1" src="/style/images/folio/chic-chick.jpg" alt="1k">
<img id="s1e2" src="/style/images/folio/young-punks.jpg" alt="2 Punks">
<img id="s1e3" src="/style/images/folio/monsters.jpg" alt="Mo3ters">
<img id="s1e4" src="/style/images/folio/schoolgirl.jpg" alt="S4oolgirl">
<img id="s1e5" src="/style/images/folio/party-monster.jpg" alt="Party2nster">
<img id="s1e6" src="/style/images/folio/unconventional-love.jpg" alt="Unc3ntional Love">
<img id="s1e7" src="/style/images/folio/invasion.jpg" alt="In32asion">
<img id="s1e8" src="/style/images/folio/online-shopping.jpg" alt="On33opping">
</div>
<div id="tab-panels">
<ul>
<li><a href="#s1e1">1</a></li>
<li><a href="#s1e2">2</a></li>
<li><a href="#s1e3">3</a></li>
<li><a href="#s1e4">4</a></li>
<li><a href="#s1e5">5</a></li>
<li><a href="#s1e6">6</a></li>
<li><a href="#s1e7">7</a></li>
<li><a href="#s1e8">8</a></li>
<li><a href="#s1e9">9</a></li>
<li><a href="#s1e10">10</a></li>
<li><a href="#s1e11">11</a></li>
<li><a href="#s1e12">12</a></li>
<li><a href="#s1e13">13</a></li>
</ul>
<h5>Выбор серии</h5>
</div>
</div>
<!-- /Конец 1с серий-->
</div> <!-- /Конец 1с-->
<!-- 2с-->
<div id="2s" class="tab_content">
<!-- 2с серии-->
<div id="tabs">
<div id="tab-panes">
<img id="s2e1" src="/style/images/folio/chic-chick.jpg" alt="23423423Chick">
<img id="s2e2" src="/style/images/folio/young-punks.jpg" alt="Yo234234 Punks">
<img id="s2e3" src="/style/images/folio/monsters.jpg" alt="Mo234234234ters">
<img id="s2e4" src="/style/images/folio/schoolgirl.jpg" alt="Sc2342343lgirl">
<img id="s2e5" src="/style/images/folio/party-monster.jpg" alt="Part234234nster">
<img id="s2e6" src="/style/images/folio/unconventional-love.jpg" alt="Unco4234234tional Love">
<img id="s2e7" src="/style/images/folio/invasion.jpg" alt="Invasion">
<img id="s2e8" src="/style/images/folio/online-shopping.jpg" alt="Online Shopping">
</div>
<div id="tab-panels">
<ul>
<li><a href="#s2e1">1</a></li>
<li><a href="#s2e2">2</a></li>
<li><a href="#s2e3">3</a></li>
<li><a href="#s2e4">4</a></li>
<li><a href="#s2e5">5</a></li>
<li><a href="#s2e6">6</a></li>
<li><a href="#s2e7">7</a></li>
<li><a href="#s2e8">8</a></li>
<li><a href="#s2e9">9</a></li>
<li><a href="#s2e10">10</a></li>
<li><a href="#s2e11">11</a></li>
<li><a href="#s2e12">12</a></li>
<li><a href="#s2e13">13</a></li>
<li><a href="#s2e14">14</a></li>
<li><a href="#s2e15">15</a></li>
<li><a href="#s2e16">16</a></li>
<li><a href="#s2e17">17</a></li>
<li><a href="#s2e18">18</a></li>
<li><a href="#s2e19">19</a></li>
</ul>
<h5>Выбор серии</h5>
</div>
</div>
<!-- /Конец 2с серий-->
</div> <!-- /Конец 2с-->
<!-- 3с-->
<div id="3s" class="tab_content">
<!-- 3с серии-->
<div id="tabs">
<div id="tab-panes">
<img id="s1" src="/style/images/folio/chic-chick.jpg" alt="Chic Chick">
<img id="s3e2" src="/style/images/folio/young-punks.jpg" alt="Young Punks">
<img id="s3e3" src="/style/images/folio/monsters.jpg" alt="Monsters">
<img id="s3e4" src="/style/images/folio/schoolgirl.jpg" alt="Schoolgirl">
<img id="s3e5" src="/style/images/folio/party-monster.jpg" alt="Party Monster">
<img id="s3e6" src="/style/images/folio/unconventional-love.jpg" alt="Unconventional Love">
<img id="s3e7" src="/style/images/folio/invasion.jpg" alt="Invasion">
<img id="s3e8" src="/style/images/folio/online-shopping.jpg" alt="Online Shopping">
</div>
<div id="tab-panels">
<ul>
<li><a href="#s1">1</a></li>
<li><a href="#s3e2">2</a></li>
<li><a href="#s3e3">3</a></li>
<li><a href="#s3e4">4</a></li>
<li><a href="#s3e5">5</a></li>
<li><a href="#s3e6">6</a></li>
<li><a href="#s3e7">7</a></li>
<li><a href="#s3e8">8</a></li>
<li><a href="#s3e9">9</a></li>
<li><a href="#s3e10">10</a></li>
<li><a href="#s3e11">11</a></li>
<li><a href="#s3e12">12</a></li>
<li><a href="#s3e13">13</a></li>
<li><a href="#s3e14">14</a></li>
<li><a href="#s3e15">15</a></li>
<li><a href="#s3e16">16</a></li>
<li><a href="#s3e17">17</a></li>
<li><a href="#s3e18">18</a></li>
<li><a href="#s3e19">19</a></li>
<li><a href="#s3e20">20</a></li>
<li><a href="#s3e21">21</a></li>
<li><a href="#s3e22">22</a></li>
</ul>
<h5>Выбор серии</h5>
</div>
</div>
<!-- /Конец 3с серий-->
</div> <!-- /Конец 3с-->
<!-- 4с-->
<div id="4s" class="tab_content">
<!-- 4с серии-->
<div id="tabs">
<div id="tab-panes">
<img id="s4e1" src="/style/images/folio/chic-chick.jpg" alt="Chic Chick">
<img id="s4e2" src="/style/images/folio/young-punks.jpg" alt="Young Punks">
<img id="s4e3" src="/style/images/folio/monsters.jpg" alt="Monsters">
<img id="s4e4" src="/style/images/folio/schoolgirl.jpg" alt="Schoolgirl">
<img id="s4e5" src="/style/images/folio/party-monster.jpg" alt="Party Monster">
<img id="s4e6" src="/style/images/folio/unconventional-love.jpg" alt="Unconventional Love">
<img id="s4e7" src="/style/images/folio/invasion.jpg" alt="Invasion">
<img id="s4e8" src="/style/images/folio/online-shopping.jpg" alt="Online Shopping">
</div>
<div id="tab-panels">
<ul>
<li><a href="#s4e1">1</a></li>
<li><a href="#s4e2">2</a></li>
<li><a href="#s4e3">3</a></li>
<li><a href="#s4e4">4</a></li>
<li><a href="#s4e5">5</a></li>
<li><a href="#s4e6">6</a></li>
<li><a href="#s4e7">7</a></li>
<li><a href="#s4e8">8</a></li>
<li><a href="#s4e9">9</a></li>
<li><a href="#s4e10">10</a></li>
<li><a href="#s4e11">11</a></li>
<li><a href="#s4e12">12</a></li>
<li><a href="#s4e13">13</a></li>
<li><a href="#s4e14">14</a></li>
<li><a href="#s4e15">15</a></li>
<li><a href="#s4e16">16</a></li>
<li><a href="#s4e17">17</a></li>
<li><a href="#s4e18">18</a></li>
</ul>
<h5>Выбор серии</h5>
</div>
</div>
<!-- /Конец 4с серий-->
</div> <!-- /Конец 4с-->
<!-- 5с-->
<div id="5s" class="tab_content">
<!-- 5с серии-->
<div id="tabs">
<div id="tab-panes">
<img id="s5e1" src="/style/images/folio/chic-chick.jpg" alt="Chic Chick">
<img id="s5e2" src="/style/images/folio/young-punks.jpg" alt="Young Punks">
<img id="s5e3" src="/style/images/folio/monsters.jpg" alt="Monsters">
<img id="s5e4" src="/style/images/folio/schoolgirl.jpg" alt="Schoolgirl">
<img id="s5e5" src="/style/images/folio/party-monster.jpg" alt="Party Monster">
<img id="s5e6" src="/style/images/folio/unconventional-love.jpg" alt="Unconventional Love">
<img id="s5e7" src="/style/images/folio/invasion.jpg" alt="Invasion">
<img id="s5e8" src="/style/images/folio/online-shopping.jpg" alt="Online Shopping">
</div>
<div id="tab-panels">
<ul>
<li><a href="#s5e1">1</a></li>
<li><a href="#s5e2">2</a></li>
<li><a href="#s5e3">3</a></li>
<li><a href="#s5e4">4</a></li>
<li><a href="#s5e5">5</a></li>
<li><a href="#s5e6">6</a></li>
<li><a href="#s5e7">7</a></li>
<li><a href="#s5e8">8</a></li>
<li><a href="#s5e9">9</a></li>
<li><a href="#s5e10">10</a></li>
<li><a href="#s5e11">11</a></li>
<li><a href="#s5e12">12</a></li>
<li><a href="#s5e13">13</a></li>
<li><a href="#s5e14">14</a></li>
<li><a href="#s5e15">15</a></li>
<li><a href="#s5e16">16</a></li>
</ul>
<h5>Выбор серии</h5>
</div>
</div>
<!-- /Конец 5с серий-->
</div> <!-- /Конец 5с-->
<!-- 6с-->
<div id="6s" class="tab_content">
<!-- 6с серии-->
<div id="tabs1">
<div id="tab-panes">
<img id="s6e1" src="/style/images/folio/chic-chick.jpg" alt="Chic Chick">
<img id="s6e2" src="/style/images/folio/young-punks.jpg" alt="Young Punks">
<img id="s6e3" src="/style/images/folio/monsters.jpg" alt="Monsters">
<img id="s6e4" src="/style/images/folio/schoolgirl.jpg" alt="Schoolgirl">
<img id="s6e5" src="/style/images/folio/party-monster.jpg" alt="Party Monster">
<img id="s6e6" src="/style/images/folio/unconventional-love.jpg" alt="Unconventional Love">
<img id="s6e7" src="/style/images/folio/invasion.jpg" alt="Invasion">
<img id="s6e8" src="/style/images/folio/online-shopping.jpg" alt="Online Shopping">
</div>
<div id="tab-panels">
<ul>
<li><a href="#s6e1">1</a></li>
<li><a href="#s6e2">2</a></li>
<li><a href="#s6e3">3</a></li>
<li><a href="#s6e4">4</a></li>
<li><a href="#s6e5">5</a></li>
<li><a href="#s6e6">6</a></li>
<li><a href="#s6e7">7</a></li>
<li><a href="#s6e8">8</a></li>
<li><a href="#s6e9">9</a></li>
<li><a href="#s6e10">10</a></li>
<li><a href="#s6e11">11</a></li>
<li><a href="#s6e12">12</a></li>
<li><a href="#s6e13">13</a></li>
</ul>
<h5>Серия</h5>
</div>
</div>
<!-- /Конец 6с серий-->
</div> <!-- /Конец 6с-->
</div>
</div>
<!-- /Конец-->


JS первых вкладок
[JS]$(function () {

function makeTabs(contId) {
var tabContainers = $('#'+contId+' div.tabs > div');
tabContainers.hide().filter(':first').show();

$('#'+contId+' div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('#'+contId+' div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
}

makeTabs('tabs-1');
makeTabs('tabs-2');
});
[/JS]

JS вкладок, которые открываются во вкладках)
[JS]var Rype = Rype || {};

Rype.tabs = function(container, startIndex) {
var root = container || '#tabs';
var speed = 500; //ms?
startIndex = startIndex || 0;
root = $(root);
root.addClass('js-enabled');

//add click events
$.each(root.find('ul li a'),function(index) {
var that = $(this);
if(index == startIndex) {
that.parent().addClass('current');
}
that.click(function(){
//set current class
$(this).parent().addClass('current');
$.each($(this).parent().siblings(),function() {
$(this).removeClass('current');
});
//show/hide panels
$.each($(that.attr('href')).fadeIn(speed).siblings(),function(){
$(this).hide();
});
return false;
});
});

//hide all but start index
$.each(root.find('#tab-panes > *'),function(index, el) {
if(index != startIndex) {
$(this).hide();
}
});
};

$(document).ready(function(){
//pix tabs
//UI tabs require too strict markup, roll own tabs function.
var tabs = $('#tabs');
if(tabs.length)
Rype.tabs(tabs);

var acc = $('#accordion');
if(acc.length)
acc.accordion();
});[/JS]

CSS 1-х вкладок
[CSS] #tabs-1 {text-align:left; margin-top: 20px;}
.tabNavigation {list-style:none; margin: 0; padding: 0;}
.tabNavigation li {
display: inline;
margin: 0px 0px 0px 5px;
text-shadow: 1px 1px 1px #cecece;
}

.tabNavigation li a {
color: #555;
background: url('/img/site/content/fon_tab_01.gif') repeat-x top #cecece;
border-top: 1px solid #cecece;
border-right: 1px solid #cecece;
border-left: 1px solid #cecece;
padding: 6px 10px 6px 10px;
}

.tabNavigation li a.selected,ul
.tabNavigation li a.selected:hover {color:#555; background:#ebeced; border-bottom: 1px solid #ebeced; }
.tabNavigation li a:hover {color: #474747; background: url('/img/site/content/fon_tab_01.gif') repeat-x top #e9e9e9;}
.tabNavigation li a:focus {outline: 0;}

.tab_content {
overflow: hidden;
text-align:left;
border-top: 1px solid #cecece;
padding: 5px 0px 10px 0px;
margin-top: 6px;
} [/CSS]

CSS внутриних вкладок
[CSS]#tab-panes {
background-color:#e8e8e8;
border:1px solid #c5c6c8;
overflow:hidden;
}
#tabs.js-enabled #tab-panes {
overflow:visible;
}
#tab-panes img {
padding:7px;
}
#tabs #tab-panels {
border:1px solid #c5c6c8;
border-top:0;
overflow:hidden;
}
#tab-panels ul {
list-style:none;
margin:0;
padding-left:20px;
float:right;
}
#tab-panels li {
float:left;
margin:0;
}
#tab-panels li a {
border-left:1px solid #c5c6c8;
color:#888a8c;
display:block;
padding:5px 0;
text-align:center;
text-decoration:none;
width:30px;
font-weight:bold;
}
#tab-panels li a:hover, #tab-panels li.current a {
color:#373737;
}
#tab-panels h5 {
color:#8d9092;
float:right;
font-size:10pt;
line-height:20px;
padding-right:10px;
}[/CSS]

В чем проблема понять не могу :hmhm:, толи они конфликтуют както, толи в коде косяк, но скорей всего в JS проблема, так как я в нем не особо разбираюсь...
Вобщем прошу вашей помощи, за ранее благодарен.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Pulse_hb
Pulse_hb
Topic Starter сообщение 16.5.2011, 17:32; Ответить: Pulse_hb
Сообщение #2


Прошу удалить тему, решил, что морочусь зря, сделаю более проще) да и уверен, что другие тоже морочиться не хотят)

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Проблема с админкой
5 Prok 2314 29.7.2019, 20:04
автор: dvakarandasha
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПроблема с таблицей, которая выводится через скрипт
7 vanchester 1335 15.2.2019, 19:06
автор: Artos_mw
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПроблема в тегах при сохранении контента
1 Kord18 1403 13.3.2018, 18:19
автор: Evgeniy3200
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПроблема вёрстки адаптивной страницы на divах
28 master-vek 4712 8.2.2018, 19:29
автор: master-vek
Открытая тема (нет новых ответов) Проблема с All in one SEO?
17 okseo 2680 30.11.2017, 14:06
автор: okseo


 



RSS Текстовая версия Сейчас: 28.3.2024, 17:56
Дизайн