رفتن به مطلب

ایجاد تب اسلایدبار


پست های پیشنهاد شده

سلام خدمت تمامی دوستان گرامی؛من دارم سایتی طراحی میکنم که با توجه به نیازهام من نیاز شدید به این تب اسلایدبار در سایتم بدلیل چند خدماتی که این سایت ارائه میدهد است.بعنوان مثال این تب اسلایدبار دارای تب دانلودها؛اموزش ها؛طراحی سایت خب قاعدتا هر کدام از این تب ها دارای چندین مطلب هستند که یک ادامه مطلب برای هر مطلب قرار دارد؛من حالا من در زمینه توابعش اش و راه اندازای این تب اسلایدبار نیاز به کمک دارم.

باتشکرpost-10942-0-86970900-1437336315_thumb.p

لینک به ارسال

سلام دوست عزیز

این آموزش دارای سه قسمت است یک: اچ تی ام ال دو: جی کوئری و سوم سی اس اس برای استایل دهی .

اول اچ تی ام ال

<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;
}

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...