<style>
#pun-announcement table.main {
width: 919px;
border-spacing: 0px;
height: 300px;
margin: auto;
}
#pun-announcement table.main td {
border: none;
padding: 0;
}
#pun-announcement table.main td.buttons {
width: 150px;
}
#pun-announcement table.main td.buttons ul {
margin: auto;
}
#pun-announcement table.main td.buttons li span {
display: block;
text-align: center;
margin: 12px 0;
cursor: pointer;
}
#pun-announcement table.main td.buttons li div {
display: none;
}
#pun-announcement table.main div.content {
height: 100%;
overflow-y: auto;
text-align: center
}
</style>
<table class="main"><tr><td class="buttons"><ul>
<li class="active"><span>События в игре</span>
<div>Контент событий</div></li>
<li><span>Информация</span>
<div>Контент информации</div></li>
<li><span>Навигация</span>
<div>Контент навигации</div></li>
<li><span>Акции</span>
<div>Контент акций</div></li>
<li><span>Администрация</span>
<div>Контент администрации</div></li>
<li><span>Баннеры</span>
<div>Контент баннеров</div></li>
</ul></td>
<td><div class="content"></div></td></tr></table>
<script>
$('#pun-announcement table.main td.buttons li').click(function() {
$('#pun-announcement table.main td.buttons li').removeClass('active');
$(this).addClass('active');
$('#pun-announcement table.main div.content')
.hide('slow', function() { $(this).html($('#pun-announcement table.main td.buttons li.active > div').html()); })
.show('slow');
}).filter('.active').trigger('click')
</script>