mk-73

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

2 پست در این موضوع قرار دارد

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

اول اچ تی ام ال

<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

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری