قسمت جیکوئری دوره psd

صادق جعفری

سلام

هر چیزی ممکنه

باید کد های html و jquery رو قرار بدید ببینم

ندیده نمیشه نظری داد

haniehkh

  این کد html

  <div class="slidershow">
        <div class="center">
            <div class="right">
                <!--Slidebar-->
                <div class="slider-box">
                    <div class="btns">
                        <div class="btn-items btnItem1 ">
                            <h5> فروشگاه کتاب</h5>
                            <h6> کتاب های انگلیسی </h6>
                        </div>
                        <div class="btn-items btnItem2">
                            <h5> فروشگاه کتاب</h5>
                            <h6> کتاب های فرانسه </h6>
                        </div>
                        <div class="btn-items btnItem3">
                            <h5> فروشگاه کتاب</h5>
                            <h6> کتاب های آلمانی </h6>
                        </div>
                        <div class="btn-items btnItem4">
                            <h5> فروشگاه کتاب</h5>
                            <h6> کتاب های ترکی استانبولی </h6>
                        </div>
                    </div>
                    <div class="imgs">
                        <div class="img-item imgItem1">
                            <img src="../pictures/slider1.jpg" alt="">
                        </div>
                    </div>
                    <div class="img-item imgItem1">
                        <img src="../pictures/slider2.jpg" alt="">
                    </div>
                    <div class="img-item imgItem1">
                        <img src="../pictures/slider3.jpg" alt="">
                    </div>
                    <div class="img-item imgItem1">
                        <img src="../pictures/slider4.jpg" alt="">
                    </div>
                </div>

haniehkh

اینم کد jquery

    $(".imgItem1").show();
    $(".imgItem2").hide();
    $(".imgItem3").hide();
    $(".imgItem4").hide();
    $(".btnItem1").addClass("active");
    $(".btnItem2").removeClass("active");
    $(".btnItem3").removeClass("active");
    $(".btnItem4").removeClass("active");

    $(".btnItem1").click(function() {
        $(".imgItem1").show();
        $(".imgItem2").hide();
        $(".imgItem3").hide();
        $(".imgItem4").hide();
        $(".btnItem1").addClass("active");
        $(".btnItem2").removeClass("active");
        $(".btnItem3").removeClass("active");
        $(".btnItem4").removeClass("active");
    });

    $(".btnItem2").click(function() {
        $(".imgItem1").hide();
        $(".imgItem2").show();
        $(".imgItem3").hide();
        $(".imgItem4").hide();
        $(".btnItem1").removeClass("active");
        $(".btnItem2").addClass("active");
        $(".btnItem3").removeClass("active");
        $(".btnItem4").removeClass("active");
    });
    $(".btnItem3").click(function() {
        $(".imgItem1").hide();
        $(".imgItem2").hide();
        $(".imgItem3").show();
        $(".imgItem4").hide();
        $(".btnItem1").removeClass("active");
        $(".btnItem2").removeClass("active");
        $(".btnItem3").addClass("active");
        $(".btnItem4").removeClass("active");
    });
    $(".btnItem4").click(function() {
    $(".imgItem1").hide();
    $(".imgItem2").hide();
    $(".imgItem3").hide();
    $(".imgItem4").show();
    $(".btnItem1").removeClass("active");
    $(".btnItem2").removeClass("active");
    $(".btnItem3").removeClass("active");
    $(".btnItem4").addClass("active");
    });
    });

صادق جعفری

فکر کنم ایراد از اشتباهات html باشه

شما یک کلاس imgs درست کردید که تصویر اول داخلشه و 3 تا تصویر دوم خارج از اونه، احتمالا توی css کنترلش کردین و به هم ریخته

haniehkh

سلام. خیلی ممنون از راهنماییتون. بله مشکل از همون <div> بود. جای اشتباهی بسته بودم و خودم متوجه نشده بودم.