Archie Goodwin

На главной странице захотелось сделать переключатель отображения между последними записями в блоге и микроблогом, чтобы благодаря одному клику кнопки иметь доступ к микроблогу не только через личную страницу, но и с главной страницы тоже. Как это можно сделать?

Можно воспользоваться одним из десятков существующих скриптов табов и запихнуть код, который отвечает за отображение последних записей блога в одну вкладку, а код микроблога - в другую вкладку.

Может из-за того что не хотел использовать громоздкий код табов, может не захотел стиль кнопок-вкладок и решил ограничиться одной свитч-кнопкой, а может просто захотелось изобрести свой "велосипед". Так или иначе, написал код, который по клику кнопки-переключателя скрывает последние записи в блоге, fade-анимацией отображает микроблог и наоборот при повторном клике по этой же кнопке.

Сама кнопка (HTML код):

<span class="WellButton Off Micro_Act" valign="center" title="Кнопка активации микроблога">Микроблог</span>

<style>
.Off {
background-image:url(http://archie-goodwin.net/v2/img/power_off.png);
background-repeat: no-repeat;
background-position: 95% center;
padding-right:25px !important;
background-size: 14px;
} 
 .On {
background-image:url(http://archie-goodwin.net/v2/img/power_on.png);
background-repeat: no-repeat;
background-position: 95% center;
padding-right:25px !important;
background-size: 14px;
} 
.micro {display:none;}
.WellButton{
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;
 background-color:#f8f8f8;
 border:1px solid #cfdeed;
 padding:5px;
 display:inline-block;
 color:#177de3;
 font-size:12px;
 cursor:pointer;
 } 
 .WellButton:hover{
 background-color:#eaeaea;
 border:1px solid #b8b8b8;
 color:#f208d4;
 }
</style> 

Теперь добавим самую малость "магии" (JavaScript jQuery):

<script type="text/javascript"> 
 $('.Micro_Act').click(function() {
 if ($(this).hasClass("Off")) 
 $(this).removeClass("Off").addClass("On"),
 $('.blog').hide(),
 $('.micro').fadeIn();
 else $(this).removeClass("On").addClass("Off"),
 $('.micro').hide(),
 $('.blog').fadeIn();
 }) 
</script>

Также нужно заключить то что мы хотим отображать по умолчанию в div с классом blog, а то что показывать после активации переключателя в div с классом micro

<div class="blog">
Контент по умолчанию
</div>

<div class="micro">
Контент по активации
</div>