unid_user 63 ارسال شده در دی 97 گزارش بازنشر ارسال شده در دی 97 سلام و درود دوستان گرامی، تصویر زیر رو به این صورت کد نویسی کردم که برای هر کدام از محصولات یه تگ a قرار دادم و به هر تگ a یه id خاص اختصاص دادم. با جی کوئری اومدم گفتم که هر وقت روی اولین محصول کلیک شد تصویر و متنی که مربوط اون هست رو نمایش بده. مثلا گفتم که تگ img با آی دی img-1 و تگ P با آی دی P-1 مربوط به محصول یک هستند. اما به صورت زیر کدها رو نوشتم و میدونم توی داینامیک کردن به مشکل می خورم می خوام بدونم روش بهتری وجود داره؟ <div class="img-box"> <img id="img-1" src="image/x1.jpg" alt="تصویر محصول یک"> <img id="img-2" src="image/x2.jpg" alt="تصویر محصول دو"> <img id="img-3" src="image/x3.jpg" alt="تصویر محصول سه"> </div> <div class="p-box"> <p id="p-1">متن محصول یک</p> <p id="p-2">متن محصول دو</p> <p id="p-2">متن محصول سه</p> </div> <div class="products"> <a id="a-1" href="#">محصول یک</a> <a id="a-2" href="#">محصول یک</a> <a id="a-3" href="#">محصول یک</a> </div> کدهای جی کوئری $("#a-1").hover(function() { $('#img-1').fadeIn('400'); $('#p-1').fadeIn('400'); }, function() { $('#img-1').fadeOut('300'); $('#p-1').fadeOut('300'); }); $("#a-2").hover(function() { $('#img-2').fadeIn('400'); $('#p-2').fadeIn('400'); }, function() { $('#img-2').fadeOut('300'); $('#p-2').fadeOut('300'); }); $("#a-3").hover(function() { $('#img-3').fadeIn('400'); $('#p-3').fadeIn('400'); }, function() { $('#img-3').fadeOut('300'); $('#p-3').fadeOut('300'); }); با تشکر و سپاس نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .