رفتن به مطلب

ایجاد تب


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

سلام دوستان من دقیقا کد این قسمت از این سایت را میخوام


wikiandroid.com

بخش محبوب ترین

خواهشا اگه میشه دقیقا همینو بدین مرس.

لینک به ارسال

نمیشه که ما برات کپی کنیم بزاریم اینجا ! خودتون باید تب هایی که میخوایید رو بسازید و شخصی سازی کنید

لینک به ارسال

ببینید من خیلی هاشو میرم ولی یه مشکلی پیش میاد / چون من دوتا از اینا میخوام یعنی دوتا بلوک جدا هر کدوم با 3تا تب یکی کار میکنه دومی مشکل داره نمیدونم چرا تب هارو میزنی ایدیه تب با ادرس سایت میاد تو نوار ادرس (site.com/#all) ولی هیچ اتفاقی نمیوفته ولی اولی کاملا درست کار میکنه الان مشکل کجاست دقیقا ؟ انگار با هم تداخل داره !!!

لینک به ارسال

شرمند برای یکی دوستام دارم ادیت میکنم رو لوکال هست .

کد میدم.

کد سایدبار


<section class="widget aside collapse">
<div class="title"><h3>تبلیغات</h3></div>
<br>
<center>
<a title="تبلیغات" href="/ads"><img style="border-width: 0px; margin: 0px 5px 0px 5px;" src="/images/.png" alt="تبلیغات" width="240" height="240" /></a>
</center>
</section>
<section class="newsbox">
<div class="title"><h3>آخرین مطالب</h3></div>
<div class="topnews-key">
<a href="#Movies"><span>فیلم ها</span></a>
<a href="#Series"><span>سریال ها</span></a>
<a href="#Music" class="last"><span>آهنگ ها</span></a>
<div class="clear"></div>
</div>
<div class="topnews-area" id="Movies">
<ul>
<?php $recentposts = get_posts('numberposts=10&category=9'); foreach ($recentposts as $post) : setup_postdata($post); ?>
<li>
<div>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</div>
</li>
<?php endforeach; ?>
</ul>
</div>
<div class="topnews-area" id="Series">
<ul>
<?php $recentposts = get_posts('numberposts=10&category=58'); foreach ($recentposts as $post) : setup_postdata($post); ?>
<li>
<div>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</div>
</li>
<?php endforeach; ?>
</ul>
</div>
<div class="topnews-area" id="Music">
<ul>
<?php $recentposts = get_posts('numberposts=10&category=59'); foreach ($recentposts as $post) : setup_postdata($post); ?>
<li>
<div>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</div>
</li>
<?php endforeach; ?>
</ul>
</div>
</section>

استایل


.leftsidebar {
float: left;
width: 290px;
}
.leftsidebar .widget {
margin: 0px 0px 10px 0px;
background: white;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.leftsidebar .widget .title h3 {
background: url(images/lfsico.png) #e5e5e5 no-repeat right -490px;
padding: 8px 50px 8px 5px;
-moz-border-radius: 4px 4px 0px 0px ;
-webkit-border-radius: 4px 4px 0px 0px ;
border-radius: 4px 4px 0px 0px;
color: #666
}
.leftsidebar .newsbox,
.requriedsoft,
.vipsection {
margin: 0px 0px 10px 0px;
background: white;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.leftsidebar .newsbox .title h3 {
background: url(images/lfsico.png) #2f3b4a no-repeat right -547px;
padding: 8px 50px 8px 5px;
-moz-border-radius: 4px 4px 0px 0px ;
-webkit-border-radius: 4px 4px 0px 0px ;
border-radius: 4px 4px 0px 0px;
color: white
}
.leftsidebar .vipsection .title h3 {
background: url(images/icons.png) #3297DA no-repeat right -607px;
padding: 8px 50px 8px 5px;
-moz-border-radius: 4px 4px 0px 0px ;
-webkit-border-radius: 4px 4px 0px 0px ;
border-radius: 4px 4px 0px 0px;
color: white
}
.leftsidebar .newsbox .topnews-key {
background: #F3F3F3;
font: 12px/2 'BYekan',tahoma;
}
.leftsidebar .newsbox .topnews-key a {
border-left: 1px solid #E1E3E7;
display: block;
background: url(images/arrows.png) #F3F3F3 no-repeat center 0px;
float: right;
color: #7A8089;
width: 33%;
}
.leftsidebar .newsbox .topnews-key a.last {
border:none;
}
.leftsidebar .newsbox .topnews-key a:hover,
.leftsidebar .newsbox .topnews-key a.active {
background: url(images/arrows.png) #fff no-repeat center -75px
}
.leftsidebar .newsbox .topnews-key a span{
padding: 40px 0px 10px;
display: block;
text-align: center;
}
.vipsection ul ,.leftsidebar .newsbox ul {
padding: 10px 0px;
}
.vipsection ul li a, .leftsidebar .newsbox ul li a, .relatedpostlist ul li a {
background: url(images/arrow.gif) no-repeat right 14px;
padding: 5px 18px 5px 10px;
color: #71767B;
display: block;
}
.vipsection ul li a:hover, .leftsidebar .newsbox ul li a:hover, .relatedpostlist ul li a:hover{
background: url(images/arrow.gif) #58C9F3 no-repeat right 14px;
color: white;
}
.leftsidebar .requrie-title {
height: 60px;
width: 25px;
margin: 0px auto;
background: url(images/lfsico.png) no-repeat 0px -345px;
}
.leftsidebar .requriedsoft h3 {
text-align: center;
border-bottom: 1px solid #e1e1e1;
padding: 0 0 15px 0
background: url(images/lfsico.png) no-repeat 0px -345px;
}
.leftsidebar .requriedsoft ul li{
padding: 10px;
border-right: 4px solid #ebebeb;
border-bottom: 1px solid #e7e7e7;
}
.leftsidebar .requriedsoft ul li:hover{
border-right: 4px solid #E4E4E4;
}
.leftsidebar .textads a {
display: block;
margin: 10px 0px;
padding: 6px;
background: #EBECED;
color: #747D81;
-moz-border-radius: 3px 3px 0px 0px;
-webkit-border-radius: 3px 3px 0px 0px;
border-radius: 3px 3px 0px 0px;
}
.leftsidebar .textads a b {
font: normal 12px/2 'BYekan',tahoma
}
.leftsidebar .textads a:hover {
color: #fff;
-moz-box-shadow: 0px 0px 4px #ccc;
-webkit-box-shadow: 0px 0px 4px #ccc;
box-shadow: 0px 0px 4px #ccc;
}
.leftsidebar .textads a.blue:hover {
background: #3297DA;
}
.leftsidebar .textads a.green:hover {
background: #E84A3A;
}
.leftsidebar .textads a.yellow:hover {
background: #F1B20E;
}

حالا وقتی دوتا از همون تب ها ایجاد میکنم نمیشه خراب میشه هردو با هم کار میکنند وقتی css جدید میذارم واسه یکی همون مشکلی که گفتم پیش میاد همه چی درست میشه تب ها کار نمیکنه.

لینک به ارسال

به style.css اضافه کنید


.topnews-area { display:none;}
.topnews-area:target {display:block}

نشد اقای فخار

الان من این کارو کردم توی سایدبار + اون کدی که دادین ولی باز کار نمیکنه


<section class="widget aside collapse">
<div class="title"><h3>تبلیغات</h3></div>
<br>
<center>
<a title="تبلیغات" href="/ads"><img style="border-width: 0px; margin: 0px 5px 0px 5px;" src="/images/.png" alt="تبلیغات" width="240" height="240" /></a>
</center>
</section>
<section class="newsbox">
<div class="title"><h3>آخرین مطالب</h3></div>
<div class="topnews-key">
<a href="#Movies"><span>فیلم ها</span></a>
<a href="#Series"><span>سریال ها</span></a>
<a href="#Music" class="last"><span>آهنگ ها</span></a>
<div class="clear"></div>
</div>
<div class="topnews-area" id="Movies">
<ul>
<?php $recentposts = get_posts('numberposts=10&category=9'); foreach ($recentposts as $post) : setup_postdata($post); ?>
<li>
<div>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</div>
</li>
<?php endforeach; ?>
</ul>
</div>
<div class="topnews-area" id="Series">
<ul>
<?php $recentposts = get_posts('numberposts=10&category=58'); foreach ($recentposts as $post) : setup_postdata($post); ?>
<li>
<div>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</div>
</li>
<?php endforeach; ?>
</ul>
</div>
<div class="topnews-area" id="Music">
<ul>
<?php $recentposts = get_posts('numberposts=10&category=59'); foreach ($recentposts as $post) : setup_postdata($post); ?>
<li>
<div>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</div>
</li>
<?php endforeach; ?>
</ul>
</div>
</section>
<section class="newsbox">
<div class="title"><h3>برترین</h3></div>
<div class="topnews-key">
<a href="#mo"><span>فیلم ها</span></a>
<a href="#s"><span>سریال ها</span></a>
<a href="#mu" class="last"><span>آهنگ ها</span></a>
<div class="clear"></div>
</div>
<div class="topnews-area" id="mo">
<ul>
<?php $recentposts = get_posts('numberposts=10&category=9'); foreach ($recentposts as $post) : setup_postdata($post); ?>
<li>
<div>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</div>
</li>
<?php endforeach; ?>
</ul>
</div>
<div class="topnews-area" id="s">
<ul>
<?php $recentposts = get_posts('numberposts=10&category=58'); foreach ($recentposts as $post) : setup_postdata($post); ?>
<li>
<div>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</div>
</li>
<?php endforeach; ?>
</ul>
</div>
<div class="topnews-area" id="mu">
<ul>
<?php $recentposts = get_posts('numberposts=10&category=59'); foreach ($recentposts as $post) : setup_postdata($post); ?>
<li>
<div>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</div>
</li>
<?php endforeach; ?>
</ul>
</div>
</section>

الان این شکلی شده در حالت دیفالت

post-1439-0-19635100-1411465366_thumb.pn

وقتی روی هر کدوم از تب های بالا کلیک میکنم پایینی غیر فعال میشه و بلعکس.

لینک به ارسال

با کدی گه دادم نیازی به کد دیگه ای ندارید اسکریپتی که استفاده می کنید رو غیر فعال کنید

لینک به ارسال

با کدی گه دادم نیازی به کد دیگه ای ندارید اسکریپتی که استفاده می کنید رو غیر فعال کنید

اقای فخار فک کنم از این کد جاواسکریپت باشه چون غیر فعالش میکنم هردوتا بلوک مثل بلوک" برترین" تو عکس قبل میشه .


jQuery(document).ready(function(){jQuery(".topnews-key a:first").addClass("active").show();jQuery(".topnews-area:not(:first)").hide();jQuery(".topnews-area:first").show();jQuery(".topnews-key a").click(function(){jQuery(".topnews-key a").removeClass("active");jQuery(this).addClass("active");stringref=jQuery(this).attr("href").split('#')[1];jQuery('.topnews-area:not(#'+stringref+')').hide();if(jQuery.browser.msie&&jQuery.browser.version.substr(0,3)=="6.0"){jQuery('.topnews-area#'+stringref).show();}else
jQuery('.topnews-area#'+stringref).fadeIn();return false;});});jQuery(document).ready(function(){jQuery(".keys a:first").addClass("active").show();jQuery(".post-f-c:not(:first)").hide();jQuery(".post-f-c:first").show();jQuery(".keys a").click(function(){jQuery(".keys a").removeClass("active");jQuery(this).addClass("active");stringref=jQuery(this).attr("href").split('#')[1];jQuery('.post-f-c:not(#'+stringref+')').hide();if(jQuery.browser.msie&&jQuery.browser.version.substr(0,3)=="6.0"){jQuery('.post-f-c#'+stringref).show();}else
jQuery('.post-f-c#'+stringref).fadeIn();return false;});});$(function(){var pull=$('#pull');menu=$('.rightsidebar');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle();});});$(function(){var pull1=$('#archivekey');menu1=$('.archivelist');menuHeight1=menu1.height();$(pull1).on('click',function(e){e.preventDefault();menu1.slideToggle();});});$(document).ready(function(){var windowWidth=$(document).width();if(windowWidth<=981){$('.archives').appendTo('.leftsidebar');$('.status').appendTo('.leftsidebar');}});$(document).ready(function(){var top=$('.categories').offset().top-parseFloat($('.categories').css('marginTop').replace(/auto/,0));$(window).scroll(function(event){var y=$(this).scrollTop();if(y>=top){$('.categories').addClass('fixed');}else{$('.categories').removeClass('fixed');}});});

ویرایش شده توسط Rasoul
لینک به ارسال


jQuery(document).ready(function(){jQuery(".topnews1-key a:first").addClass("active").show();jQuery(".topnews1-area:not(:first)").hide();jQuery(".topnews1-area:first").show();jQuery(".topnews1-key a").click(function(){jQuery(".topnews1-key a").removeClass("active");jQuery(this).addClass("active");stringref=jQuery(this).attr("href").split('#')[1];jQuery('.topnews1-area:not(#'+stringref+')').hide();if(jQuery.browser.msie&&jQuery.browser.version.substr(0,3)=="6.0"){jQuery('.topnews1-area#'+stringref).show();}else {jQuery('.topnews1-area#'+stringref).fadeIn();return false;});});
jQuery(document).ready(function(){jQuery(".topnews-key a:first").addClass("active").show();jQuery(".topnews-area:not(:first)").hide();jQuery(".topnews-area:first").show();jQuery(".topnews-key a").click(function(){jQuery(".topnews-key a").removeClass("active");jQuery(this).addClass("active");stringref=jQuery(this).attr("href").split('#')[1];jQuery('.topnews-area:not(#'+stringref+')').hide();if(jQuery.browser.msie&&jQuery.browser.version.substr(0,3)=="6.0"){jQuery('.topnews-area#'+stringref).show();}else {jQuery('.topnews-area#'+stringref).fadeIn();return false;});});
jQuery(document).ready(function(){jQuery(".keys a:first").addClass("active").show();jQuery(".post-f-c:not(:first)").hide();jQuery(".post-f-c:first").show();jQuery(".keys a").click(function(){jQuery(".keys a").removeClass("active");jQuery(this).addClass("active");stringref=jQuery(this).attr("href").split('#')[1];jQuery('.post-f-c:not(#'+stringref+')').hide();if(jQuery.browser.msie&&jQuery.browser.version.substr(0,3)=="6.0"){jQuery('.post-f-c#'+stringref).show();}else {jQuery('.post-f-c#'+stringref).fadeIn();return false;});});$(function(){var pull=$('#pull');menu=$('.rightsidebar');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle();});});$(function(){var pull1=$('#archivekey');menu1=$('.archivelist');menuHeight1=menu1.height();$(pull1).on('click',function(e){e.preventDefault();menu1.slideToggle();});});$(document).ready(function(){var windowWidth=$(document).width();if(windowWidth<=981){$('.archives').appendTo('.leftsidebar');$('.status').appendTo('.leftsidebar');}});$(document).ready(function(){var top=$('.categories').offset().top-parseFloat($('.categories').css('marginTop').replace(/auto/,0));$(window).scroll(function(event){var y=$(this).scrollTop();if(y>=top){$('.categories').addClass('fixed');}else{$('.categories').removeClass('fixed');}});});

کلاس سری دوم را topnews1-key و topnews1-area بگذارید

لینک به ارسال

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

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

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

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

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

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

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

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

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