Показать сообщение отдельно
  #1 (permalink)  
Старый 28.07.2013, 19:03
Интересующийся
Отправить личное сообщение для MArtyn911 Посмотреть профиль Найти все сообщения от MArtyn911
 
Регистрация: 16.07.2013
Сообщений: 12

Помогите создать вторые табы
Здравствуйте!
Есть у меня такие табы:
JS
$(function(){var tabContainers=$("div.tabs-container > div");tabContainers.hide().filter(":first").show();$("div.tabs ul.tabNavigation a").click(function(){tabContainers.hide();$(this.hash).fadeIn("slow",function(){tabContainers.filter(this.hash).show()});
$("div.tabs ul.tabNavigation a").removeClass("selected");$(this).addClass("selected");return false}).filter(":first").click();$("div.tabs ul.tabNavigation a").append("<em></em>")}));

HTML
<div class="games-gallery">		
                        <div class="title-fs">
                            <p>ФИЛЬМЫ</p>
                        </div>
                        <div class="tabs">
                            <!-- Это сами вкладки -->
                            <ul class="tabNavigation">
			    <li><a class="" href="#1_tab">Все поступления</a></li>
                            <li><a class="" href="#2_tab">Новые фильмы 2013</a></li>   
			    <li><a class="" href="#3_tab">Популярные фильмы</a></li>  
                            </ul> 
                            <div class="tabs-container">			
                                <div id="1_tab" class="tab-block">
                                <ul>       	
<div class="text2">{custom category="23,2,22,3,4,5,6,7,8,9,10,11,12,14,15,16,17,18,19,20,21" template="shortstory" aviable="global" from="0" limit="12" cache="yes"}</div> <!-- контент-->

				</ul>
                                </div>

<!-- end tab-block -->                                
                             

                                <div id="2_tab" class="tab-block">
                                    <ul>
<div class="text2">{custom category="drg" template="shortstory" aviable="global" from="0" limit="6" cache="no"}</div> <!-- новые сериалы-->
<center><a href="#">Все сериалы</a></center>
				    </ul>
                                    </div>

<!-- end tab-block -->

                                 <div id="3_tab" class="tab-block">
                                    <ul>
<div class="text2"></div>
				    </ul>
                                    </div>     
 
								
</div>
</div>
</div>

CSS
Код:
.games-gallery {
        width: 100%;
        float: left;
        padding-top: 15px;
}
        
.games-gallery .tabs-container {
        width: 100%;
        float: left;
        padding: 3px 0;
        background: #36353b url("../images/tabs_bg.png") repeat;
}

.tab-block {
        width: 100%;
        float: left;
        overflow: hidden;
}
            
.tab-block ul {
	list-style: none;
}
                
.tab-block li {
        /*width: 160px;*/
        height: 240px;
        float: left;
        margin: 7px 1px 7px 9px;
        padding: 3px;
        background: #edd606;
}
                
.tab-block li:hover {
	background: #0bb8e8;
}
                
.tab-block ul .img-b {
        width: 160px;
        height: 205px;
        float: left;
}
                    
.tab-block ul .img-b img {
	max-width: 160px;
	max-height: 200px;
}
                        
.tab-block ul .text-b {
        width: 100%;
        float: left;
        padding-top: 2px;
        font-size: 14px;
        color: #1d1d1d;
        text-align: center;
}
                    
.tab-block ul .text-b a {
	color: #1d1d1d;
	text-decoration: none;
}
        
div.tabs {
	float: left;
	width: 100%;
}
        
ul.tabNavigation {
        width: 100%;
        height: 33px;
        display: table;
        list-style: none;
        background: #f14400; /* Для старых браузров */
        background: -moz-linear-gradient(top, #ff4800, #f14400);
        background: -webkit-gradient(linear, left top, left bottom,
        color-stop(0%,#ff4800), color-stop(100%,#f14400));
        background: -webkit-linear-gradient(top, #ff4800, #f14400);
        background: -o-linear-gradient(top, #ff4800, #f14400);
        background: -ms-linear-gradient(top, #ff4800, #f14400);
        background: linear-gradient(top, #ff4800, #f14400);
        -pie-background: linear-gradient(#ff4800, #f14400);
        position: relative;
}

ul.tabNavigation li {
        display: table-cell;
        height: 33px;
        font-size: 11px;
        padding-left: 1px;
        text-transform: uppercase;
        text-align: center;
        background: url("../images/tabs_sep.png") left top no-repeat;
}
            
.tabNavigation li:first-child {
	padding-left: 0;
	background: none;
}


ul.tabNavigation a {
        height: 12px;
        display: block;
        padding: 10px 0 11px;
        position: relative;
        text-decoration: none;
        color: #fff;
}

ul.tabNavigation .selected {
        position: relative;
        outline: none; 
        text-decoration: none;
        background: #191919; /* Для старых браузров */
        background: -moz-linear-gradient(top, #404040, #191919);
        background: -webkit-gradient(linear, left top, left bottom,
        color-stop(0%,#404040), color-stop(100%,#191919));
        background: -webkit-linear-gradient(top, #404040, #0191919);
        background: -o-linear-gradient(top, #404040, #191919);
        background: -ms-linear-gradient(top, #404040, #191919);
        background: linear-gradient(top, #404040, #191919);
}
            
ul.tabNavigation em {
        width: 100%;
        height: 5px;
        position: absolute;
        left: 0;
        bottom: -5px;
        background: url("../images/tabs_poi.png") center top no-repeat;
        display: none;
}
            
ul.tabNavigation .selected em {
	display: block;
}
Как создать такие же ниже на странице с минимальными правками и чтобы они не конфликтовали?
Ответить с цитированием