Форум

MArtyn911 · #1 (**permalink**) 28.07.2013, 19:03

Здравствуйте!
Есть у меня такие табы:
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;
}

Как создать такие же ниже на странице с минимальными правками и чтобы они не конфликтовали?

MArtyn911 · #2 (**permalink**) 29.07.2013, 21:23

форум гуру js, а помочь никто не может

cyber · #3 (**permalink**) 29.07.2013, 23:15

MArtyn911, открою страшную тайну, когда код написан не понятно каким местом, обычно все влом , что то подсказывать .

Tim · #4 (**permalink**) 30.07.2013, 00:16

Цитата:

$(function(){var tabContainers=$("div.tabs-container > div");tabContainers.hide().filter(":first").show() ;$("div.tabs ul.tabNavigation a").click(function(){tabContainers.hide();$(this.h ash).fadeIn("slow",function(){tabContainers.filter (this.hash).show()});
$("div.tabs ul.tabNavigation a").removeClass("selected");$(this).addClass("sele cted");return false}).filter(":first").click();$("div.tabs ul.tabNavigation a").append("<em></em>")}));

Нам самим это отформатировать? Или так читать?

MArtyn911 · #5 (**permalink**) 30.07.2013, 00:30

Сообщение от Tim

Нам самим это отформатировать? Или так читать?

$(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>")
}));

Так лучше?
да не ругайтесь вы так сильно, что за люди помогают не помогают, а пнуть обязательно надо

Помогите решить вопрос, заранее благодарен за отзывчивость и помощь

Tim · #6 (**permalink**) 30.07.2013, 00:59

$(function () {

    function initTabs(tabs) {
        var tabsBox = $("div.tabs-container > div", tabs),
            buttons = $("ul.tabNavigation a", tabs);
        
        tabsBox.hide().filter(":first").show();
        
        buttons.click(function () {
            tabsBox.hide();
            $(this.hash, tabs).fadeIn("slow", function () {
                tabsBox.filter(this.hash).show();
            });
            buttons.removeClass("selected");
            $(this).addClass("selected");
            return false;
        });
        
        buttons.filter(":first").click();
        buttons.append("<em></em>");
    }
    
    $('.tabs').each(function (i, elem) {
        initTabs($(elem));
    });
});

Tim · #7 (**permalink**) 30.07.2013, 01:04

Цитата:

форум гуру js, а помочь никто не может

половина гуру забила на форум

MArtyn911 · #8 (**permalink**) 30.07.2013, 14:27

Сообщение от Tim

$(function () {

    function initTabs(tabs) {
        var tabsBox = $("div.tabs-container > div", tabs),
            buttons = $("ul.tabNavigation a", tabs);
        
        tabsBox.hide().filter(":first").show();
        
        buttons.click(function () {
            tabsBox.hide();
            $(this.hash, tabs).fadeIn("slow", function () {
                tabsBox.filter(this.hash).show();
            });
            buttons.removeClass("selected");
            $(this).addClass("selected");
            return false;
        });
        
        buttons.filter(":first").click();
        buttons.append("<em></em>");
    }
    
    $('.tabs').each(function (i, elem) {
        initTabs($(elem));
    });
});

с js очень плохо знаком, как этот код привязать в моему html что бы содать еще однни табы, покажу на примере

нужно чтобы сверху и снизу работали табы

MArtyn911 · #9 (**permalink**) 30.07.2013, 17:36

всем спасибо, все свободны как говорится, ход мыслей у меня был правильный, но по невнимательности добавил лишние

Цитата:

);

и функция не работала, тему можно закрывать

Форум

Справочник

Discord чат

Курсы javascript