mk-73 165 ارسال شده در تیر 94 گزارش بازنشر ارسال شده در تیر 94 سلام خدمت تمامی دوستان گرامی؛من دارم سایتی طراحی میکنم که با توجه به نیازهام من نیاز شدید به این تب اسلایدبار در سایتم بدلیل چند خدماتی که این سایت ارائه میدهد است.بعنوان مثال این تب اسلایدبار دارای تب دانلودها؛اموزش ها؛طراحی سایت خب قاعدتا هر کدام از این تب ها دارای چندین مطلب هستند که یک ادامه مطلب برای هر مطلب قرار دارد؛من حالا من در زمینه توابعش اش و راه اندازای این تب اسلایدبار نیاز به کمک دارم.باتشکر نقل قول لینک به ارسال
aliali 8 ارسال شده در تیر 94 گزارش بازنشر ارسال شده در تیر 94 سلام دوست عزیزاین آموزش دارای سه قسمت است یک: اچ تی ام ال دو: جی کوئری و سوم سی اس اس برای استایل دهی .اول اچ تی ام ال<div class="box"><ul class="tabs"><li><a href="#content1" class="active" >آخرین ها</a></li><li><a href="#content2" >پربازدید ها</a></li><li><a href="#content3" >تصادفی</a></li></ul><div class="content"><div id="content1"><ul class="post-list" ><li><a href="#" >برای خواندن مطلب اول کلیک کنید</a></li></ul></div><div id="content2"><ul class="post-list" ><li><a href="#" >برای خواندن مطلب اول کلیک کنید</a></li></ul></div><div id="content3"><ul class="post-list" ><li><a href="#" >برای خواندن مطلب اول کلیک کنید</a></li></ul></div></div></div>بعد جی کوئریjQuery(document).ready(function(){jQuery('.content div:not(:first)').hide();jQuery('ul.tabs li a').on('click',function(){if(jQuery(this).hasClass('active')){return false;}jQuery('ul.tabs li a').removeClass('active');jQuery(this).addClass('active');var href=jQuery(this).attr('href');var split=href.split('#');jQuery('.content div').hide();jQuery('.content div#'+split[1]).slideDown(300);return false;});});قسمت آخر برای زیبایی و رنگ دهی.tabs{list-style: none;margin: 0;padding: 0;position: absolute;top:-29px;right:-1px;}.tabs li{float: right;margin-left: 3px;}.tabs li a{text-decoration: none;font-size:10pt;padding:6px 15px;background-color:#a00;color:#FFF;}.tabs li a.active{background-color:#0a0;color:#FFF;}.content div{margin-top:5px;font-size: 9pt;padding: 5px;}.post-list{list-style: none;margin-right: 10px;}.post-list li{padding-top: 10px;}.post-list li a{text-decoration: none;color:#888;font-size: 10pt;transition: all .1s;-webkit-transition: all .1s;-moz-transition: all .1s;-o-transition: all .1s;-ms-transition: all .1s;}.post-list li a:hover{background-color: #a00;padding: 5px 15px;color:#FFF;border-radius: 3px;font-weight: bold;} 1 نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .