Форум

maxthecreator · #1 (**permalink**) 13.04.2019, 12:48

Добрый день! Написал код на js для табов, но почему то не работает, можете посмотреть ошибки, либо дополнить,порекомендовать литературу и т.д., заранее спасибо)

Верста и код js:

<div class="products__content">
<!--<div class="products-type">-->
	<ul class="products-type__list">
		<li class="products-type__list-item">
		<!--<a href="" class="products-type__list-link">Бетон</a>-->
		Бетон
	        </li>
		<li class="products-type__list-item">
	<!--<a href="" class="products-type__list-ink">Растворы</a>-->										Растворы
        </li>
</ul>
<!--</div>-->
							<!-- Бетон -->
							<div class="products main-page__products-list products-carousel">
								<div class="card card_hover product-card main-page__product-card">
									<div class="product-title">
										<p class="product-name">Бетон</p>
										<p class="product-code">
											<span class="product-code_bold">М300</span> (B&#8209;20)											
										</p>
									</div>
									<p class="product-card__text">Несущие стены, плиты перекрытий, балки, колонны, фундаменты</p>
									<div class="product-card__price-wrapper">
										<p class="price product-card__price">От<br><span class="price__value">2750</span> руб./&nbsp;м3</p>
									</div>
									<div class="product-card__enter">
										<a href="product.html">
											<img src="images/icons/jump.svg" alt="">
										</a>
									</div>
								</div>
								<div class="card card_hover product-card main-page__product-card">
									<div class="product-title">
										<p class="product-name">Бетон</p>
										<p class="product-code">
											<span class="product-code_bold">М350</span> (B&#8209;15)											
										</p>
									</div>
									<p class="product-card__text">Несущие стены, плиты перекрытий, балки, колонны, фундаменты</p>
									<div class="product-card__price-wrapper">
										<p class="price product-card__price">От<br><span class="price__value">2750</span> руб./&nbsp;м3</p>
									</div>
									<div class="product-card__enter">
										<a href="product.html">
											<img src="images/icons/jump.svg" alt="">
										</a>
									</div>
								</div>
								<div class="card card_hover product-card main-page__product-card">
									<div class="product-title">
										<p class="product-name">Бетон</p>
										<p class="product-code">
											<span class="product-code_bold">М170</span> (B&#8209;35)											
										</p>
									</div>
									<p class="product-card__text">Несущие стены, плиты перекрытий, балки, колонны, фундаменты</p>
									<div class="product-card__price-wrapper">
										<p class="price product-card__price">От<br><span class="price__value">2750</span> руб./&nbsp;м3</p>
									</div>
									<div class="product-card__enter">
										<a href="product.html">
											<img src="images/icons/jump.svg" alt="">
										</a>
									</div>
								</div>
								<div class="card card_hover product-card main-page__product-card">
									<div class="product-title">
										<p class="product-name">Бетон</p>
										<p class="product-code">
											<span class="product-code_bold">М150</span> (B&#8209;7)
										</p>
									</div>
									<p class="product-card__text">Несущие стены, плиты перекрытий, балки, колонны, фундаменты</p>
									<div class="product-card__price-wrapper">
										<p class="price product-card__price">От<br><span class="price__value">2750</span> руб./&nbsp;м3</p>
									</div>
									<div class="product-card__enter">
										<a href="product.html">
											<img src="images/icons/jump.svg" alt="">
										</a>
									</div>
								</div>
							</div>
							<!-- Растворы -->
							<div class="products main-page__products-list owl-carousel products-carousel" style="display: none;">
								<div class="card card_hover product-card main-page__product-card">
									<div class="product-title">
										<p class="product-name">Раствор</p>
										<p class="product-code">
											<span class="product-code_bold">М300</span> (B&#8209;20)
										</p>
									</div>
									<p class="product-card__text">cxszcxНесущие стены, плиты перекрытий, балки, колонны, фундаменты</p>
									<div class="product-card__price-wrapper">
										<p class="price product-card__price">От<br><span class="price__value">2750</span> руб./&nbsp;м3</p>
									</div>
									<div class="product-card__enter">
										<a href="product.html">
											<img src="images/icons/jump.svg" alt="">
										</a>
									</div>
								</div>
								<div class="card card_hover product-card main-page__product-card">
									<div class="product-title">
										<p class="product-name">Раствор</p>
										<p class="product-code">
											<span class="product-code_bold">М350</span> (B&#8209;15)											
										</p>
									</div>
									<p class="product-card__text">Несущие стены, плиты перекрытий, балки, колонны, фундаменты</p>
									<div class="product-card__price-wrapper">
										<p class="price product-card__price">От<br><span class="price__value">2750</span> руб./&nbsp;м3</p>
									</div>
									<div class="product-card__enter">
										<a href="product.html">
											<img src="images/icons/jump.svg" alt="">
										</a>
									</div>
								</div>
								<dive class="card card_hover product-card main-page__product-card">
									<div class="product-title">
										<p class="product-name">Раствор</p>
										<p class="product-code">
											<span class="product-code_bold">М170</span> (B&#8209;35)											
										</p>
									</div>
									<p class="product-card__text">Несущие стены, плиты перекрытий, балки, колонны, фундаменты</p>
									<div class="product-card__price-wrapper">
										<p class="price product-card__price">От<br><span class="price__value">2750</span> руб./&nbsp;м3</p>
									</div>
									<div class="product-card__enter">
										<a href="product.html">
											<img src="images/icons/jump.svg" alt="">
										</a>
									</div>
								</dive>
								<div class="card card_hover product-card main-page__product-card">
									<div class="product-title">
										<p class="product-name">Раствор</p>
										<p class="product-code">
											<span class="product-code_bold">М150</span> (B&#8209;7)
										</p>
									</div>
									<p class="product-card__text">Несущие стены, плиты перекрытий, балки, колонны, фундаменты</p>
									<div class="product-card__price-wrapper">
										<p class="price product-card__price">От<br><span class="price__value">2750</span> руб./&nbsp;м3</p>
									</div>
									<div class="product-card__enter">
										<a href="product.html">
											<img src="images/icons/jump.svg" alt="">
										</a>
									</div>
								</div>
							</div>
							<a href="catalog.html" class="btn btn_dark products__btn">Смотреть каталог</a>
							<div class="slider-arrows products__slider-arrows">
								<div class="slider-btn slider-btn_prev"></div>
								<div class="slider-btn slider-btn_next"></div>
							</div>
						</div>

(function($){				
    jQuery.fn.lightTabs = function(options){
        
        var createTabs = function(){
            tabs = this;
            i = 0;
            
            showPage = function(i){
                $(tabs).children(".products__content").children(".products").eq(i).hide();
                $(tabs).children(".products__content").children(".products").eq(i).show();
                $(tabs).children("ul").children("li").removeClass("active");
                $(tabs).children("ul").children("li").eq(i).addClass("active");
            }
            
            showPage(0);				
            
            $(tabs).children("ul").children("li").each(function(index, element){
                $(element).attr("data-page", i);
                i++;                        
            });
            
            $(tabs).children("ul").children("li").click(function(){
                showPage(parseInt($(this).attr("data-page")));
            });				
        };		
        return this.each(createTabs);
    };	
})(jQuery);
$(document).ready(function(){
    $(".products__content").lightTabs();
});

рони · #2 (**permalink**) 13.04.2019, 13:30

maxthecreator,
c children перебор в строках 9 - 10, attr в данном случае лучше заменить на data("page", index);
и делайте пример целиком.

рони · #3 (**permalink**) 13.04.2019, 13:37

maxthecreator,

(function($){
    jQuery.fn.lightTabs = function(options){
        var createTabs = function(){
        var tabs = this,
        showPage = function(i){
                blocks.hide()
                .eq(i).show();
                li.removeClass("active")
                .eq(i).addClass("active");
            },
        li = $(">ul li", tabs).each(function(index, element){$(element).click(showPage.bind(null,index))}) ,
        blocks = $(">.products", tabs);
        showPage(0);
        };
        return this.each(createTabs);
    };
})(jQuery);

maxthecreator · #4 (**permalink**) 13.04.2019, 13:43

Не понял в чем именно заключается перебор в строках 9 - 10, ваш код попробовал вставить, но также не работает

рони · #5 (**permalink**) 13.04.2019, 13:59

maxthecreator,
$(tabs).~~children(".products__content").children~~find(".products")~~.eq(i)~~.hide();
$(tabs)~~.children(".products__content").children~~find(".products").eq(i).show();

рони · #6 (**permalink**) 13.04.2019, 14:02

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

код попробовал вставить, но также не работает

что не так?

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
       .active{
           background-color: #F0E68C;
       }

    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script>
(function($){
    jQuery.fn.lightTabs = function(options){
        var createTabs = function(){
        var tabs = this,
        showPage = function(i){
                blocks.hide()
                .eq(i).show();
                li.removeClass("active")
                .eq(i).addClass("active");
            },
        li = $(">ul li", tabs).each(function(index, element){$(element).click(showPage.bind(null,index))}) ,
        blocks = $(">.products", tabs);
        showPage(0);
        };
        return this.each(createTabs);
    };
})(jQuery);
$(document).ready(function(){
    $(".products__content").lightTabs();
});

    </script>
</head>

<body>
<div class="products__content">
<!--<div class="products-type">-->
    <ul class="products-type__list">
        <li class="products-type__list-item">
        <!--<a href="" class="products-type__list-link">Бетон</a>-->
        Бетон
            </li>
        <li class="products-type__list-item">
    <!--<a href="" class="products-type__list-ink">Растворы</a>-->										Растворы
        </li>
</ul>
<!--</div>-->
                            <!-- Бетон -->
                            <div class="products main-page__products-list products-carousel">
                                <div class="card card_hover product-card main-page__product-card">
                                    <div class="product-title">
                                        <p class="product-name">Бетон</p>
                                        <p class="product-code">
                                            <span class="product-code_bold">М300</span> (B&#8209;20)
                                        </p>
                                    </div>
                                    <p class="product-card__text">Несущие стены, плиты перекрытий, балки, колонны, фундаменты</p>
                                    <div class="product-card__price-wrapper">
                                        <p class="price product-card__price">От<br><span class="price__value">2750</span> руб./&nbsp;м3</p>
                                    </div>
                                    <div class="product-card__enter">
                                        <a href="product.html">
                                            <img src="images/icons/jump.svg" alt="">
                                        </a>
                                    </div>
                                </div>
            </div>
                            <!-- Растворы -->
                            <div class="products main-page__products-list owl-carousel products-carousel" style="display: none;">
                                <div class="card card_hover product-card main-page__product-card">
                                    <div class="product-title">
                                        <p class="product-name">Раствор</p>
                                        <p class="product-code">
                                            <span class="product-code_bold">М300</span> (B&#8209;20)
                                        </p>
                                    </div>
                                    <p class="product-card__text">cxszcxНесущие стены, плиты перекрытий, балки, колонны, фундаменты</p>
                                    <div class="product-card__price-wrapper">
                                        <p class="price product-card__price">От<br><span class="price__value">2750</span> руб./&nbsp;м3</p>
                                    </div>
                                    <div class="product-card__enter">
                                        <a href="product.html">
                                            <img src="images/icons/jump.svg" alt="">
                                        </a>
                                    </div>
                                </div>

                            </div>
                            <a href="catalog.html" class="btn btn_dark products__btn">Смотреть каталог</a>
                            <div class="slider-arrows products__slider-arrows">
                                <div class="slider-btn slider-btn_prev"></div>
                                <div class="slider-btn slider-btn_next"></div>
                            </div>
                        </div>

</body>
</html>

maxthecreator · #7 (**permalink**) 13.04.2019, 14:10

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

что не так?

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
       .active{
           background-color: #F0E68C;
       }

    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script>
(function($){
    jQuery.fn.lightTabs = function(options){
        var createTabs = function(){
        var tabs = this,
        showPage = function(i){
                blocks.hide()
                .eq(i).show();
                li.removeClass("active")
                .eq(i).addClass("active");
            },
        li = $(">ul li", tabs).each(function(index, element){$(element).click(showPage.bind(null,index))}) ,
        blocks = $(">.products", tabs);
        showPage(0);
        };
        return this.each(createTabs);
    };
})(jQuery);
$(document).ready(function(){
    $(".products__content").lightTabs();
});

    </script>
</head>

<body>
<div class="products__content">
<!--<div class="products-type">-->
    <ul class="products-type__list">
        <li class="products-type__list-item">
        <!--<a href="" class="products-type__list-link">Бетон</a>-->
        Бетон
            </li>
        <li class="products-type__list-item">
    <!--<a href="" class="products-type__list-ink">Растворы</a>-->										Растворы
        </li>
</ul>
<!--</div>-->
                            <!-- Бетон -->
                            <div class="products main-page__products-list products-carousel">
                                <div class="card card_hover product-card main-page__product-card">
                                    <div class="product-title">
                                        <p class="product-name">Бетон</p>
                                        <p class="product-code">
                                            <span class="product-code_bold">М300</span> (B&#8209;20)
                                        </p>
                                    </div>
                                    <p class="product-card__text">Несущие стены, плиты перекрытий, балки, колонны, фундаменты</p>
                                    <div class="product-card__price-wrapper">
                                        <p class="price product-card__price">От<br><span class="price__value">2750</span> руб./&nbsp;м3</p>
                                    </div>
                                    <div class="product-card__enter">
                                        <a href="product.html">
                                            <img src="images/icons/jump.svg" alt="">
                                        </a>
                                    </div>
                                </div>
            </div>
                            <!-- Растворы -->
                            <div class="products main-page__products-list owl-carousel products-carousel" style="display: none;">
                                <div class="card card_hover product-card main-page__product-card">
                                    <div class="product-title">
                                        <p class="product-name">Раствор</p>
                                        <p class="product-code">
                                            <span class="product-code_bold">М300</span> (B&#8209;20)
                                        </p>
                                    </div>
                                    <p class="product-card__text">cxszcxНесущие стены, плиты перекрытий, балки, колонны, фундаменты</p>
                                    <div class="product-card__price-wrapper">
                                        <p class="price product-card__price">От<br><span class="price__value">2750</span> руб./&nbsp;м3</p>
                                    </div>
                                    <div class="product-card__enter">
                                        <a href="product.html">
                                            <img src="images/icons/jump.svg" alt="">
                                        </a>
                                    </div>
                                </div>

                            </div>
                            <a href="catalog.html" class="btn btn_dark products__btn">Смотреть каталог</a>
                            <div class="slider-arrows products__slider-arrows">
                                <div class="slider-btn slider-btn_prev"></div>
                                <div class="slider-btn slider-btn_next"></div>
                            </div>
                        </div>

</body>
</html>

Работает, но вот когда нажимаю на ссылку Растворы включается display: block; , а мне нужно чтоб включался display:flex; , как это исправить?

рони · #8 (**permalink**) 13.04.2019, 14:20

maxthecreator,
уберите hide и show сделайте class

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
       .active{
           background-color: #F0E68C;
       }
      .products.active{
          display: flex;
      }
      .products{
          display: none;
       }

    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script>
(function($){
    jQuery.fn.lightTabs = function(options){
        var createTabs = function(){
        var tabs = this,
        showPage = function(i){
                blocks.removeClass("active")
                .eq(i).addClass("active");
                li.removeClass("active")
                .eq(i).addClass("active");
            },
        li = $(">ul li", tabs).each(function(index, element){$(element).click(showPage.bind(null,index))}) ,
        blocks = $(">.products", tabs);
        showPage(0);
        };
        return this.each(createTabs);
    };
})(jQuery);
$(document).ready(function(){
    $(".products__content").lightTabs();
});

    </script>
</head>

<body>
<div class="products__content">
<!--<div class="products-type">-->
    <ul class="products-type__list">
        <li class="products-type__list-item">
        <!--<a href="" class="products-type__list-link">Бетон</a>-->
        Бетон
            </li>
        <li class="products-type__list-item">
    <!--<a href="" class="products-type__list-ink">Растворы</a>-->										Растворы
        </li>
</ul>
<!--</div>-->
                            <!-- Бетон -->
                            <div class="products main-page__products-list products-carousel">
                                <div class="card card_hover product-card main-page__product-card">
                                    <div class="product-title">
                                        <p class="product-name">Бетон</p>
                                        <p class="product-code">
                                            <span class="product-code_bold">М300</span> (B&#8209;20)
                                        </p>
                                    </div>
                                    <p class="product-card__text">Несущие стены, плиты перекрытий, балки, колонны, фундаменты</p>
                                    <div class="product-card__price-wrapper">
                                        <p class="price product-card__price">От<br><span class="price__value">2750</span> руб./&nbsp;м3</p>
                                    </div>
                                    <div class="product-card__enter">
                                        <a href="product.html">
                                            <img src="images/icons/jump.svg" alt="">
                                        </a>
                                    </div>
                                </div>
            </div>
                            <!-- Растворы -->
                            <div class="products main-page__products-list owl-carousel products-carousel" >
                                <div class="card card_hover product-card main-page__product-card">
                                    <div class="product-title">
                                        <p class="product-name">Раствор</p>
                                        <p class="product-code">
                                            <span class="product-code_bold">М300</span> (B&#8209;20)
                                        </p>
                                    </div>
                                    <p class="product-card__text">cxszcxНесущие стены, плиты перекрытий, балки, колонны, фундаменты</p>
                                    <div class="product-card__price-wrapper">
                                        <p class="price product-card__price">От<br><span class="price__value">2750</span> руб./&nbsp;м3</p>
                                    </div>
                                    <div class="product-card__enter">
                                        <a href="product.html">
                                            <img src="images/icons/jump.svg" alt="">
                                        </a>
                                    </div>
                                </div>

                            </div>
                            <a href="catalog.html" class="btn btn_dark products__btn">Смотреть каталог</a>
                            <div class="slider-arrows products__slider-arrows">
                                <div class="slider-btn slider-btn_prev"></div>
                                <div class="slider-btn slider-btn_next"></div>
                            </div>
                        </div>

</body>
</html>

рони · #9 (**permalink**) 13.04.2019, 14:21

maxthecreator,
не копируйте сообщение целиком.

Форум

Справочник

Discord чат

Курсы javascript