Код:
<!--HTML-->
<center><table align="left" id="relations" cols="2" cellspacing="0" rows="1" width="100%">
<tr>
<td width="150" valign="top" align="center">
<style>
#relations{
background: url(http://68.media.tumblr.com/28cb74712958f27b1a7f908449de6d11/tumblr_inline_mkjkwhXdrU1qz4rgp.png) repeat;
border-top: 5px solid #999999; border-bottom: 5px solid #999999;
}
.Name {padding:6px 6px 6px 16px;
font-size: 12px;
font-family: book antiqua;
font-weight: bold;
text-align: center;
text-transform: uppercase;
text-decoration: none;
text-shadow: 1px 1px 1px #333333;
}
.Image {
width: 100px;
height: 100px;
border: 0;
float: right;
position: relative;
border-radius: 100%;
z-index: 1;
}
.tab_content {
padding-top: 5px;
font-size: 12px;
font-family: times;
text-align: center;
}
</style>
<style>
.buttonContent {height: auto; width: 150px; padding-top:0; margin-top: 5px!important; border: 1px solid #000; text-align: center; background-color: #0a0812!important; color: #e0e2f7;}
</style>
<ul class="tabs">
<span class="my_span"><a href="#divtab0"><div class="Name">★</div></a></span>
<span class="my_span"><a href="#divtab1"><div class="Name">Бернт Райнер</div></a></span>
<span class="my_span"><a href="#divtab2"><div class="Name">Анета Станек</div></a></span>
<span class="my_span"><a href="#divtab3"><div class="Name">Гиппократ Сметвик</div></a></span>
<span class="my_span"><a href="#divtab4"><div class="Name">Петра ван Хорн</div></a></span>
<span class="my_span"><a href="#divtab5"><div class="Name">Джастин Мэннинг</div></a></span>
<span class="my_span"><a href="#divtab6"><div class="Name">Рут Сметс</div></a></span>
<span class="my_span"><a href="#divtab7"><div class="Name">Эрин Бернс</div></a></span>
<span class="my_span"><a href="#divtab8"><div class="Name">Астрид Нильссон</div></a></span>
<span class="my_span"><a href="#divtab9"><div class="Name">София Штернберг</div></a></span>
<span class="my_span"><a href="#divtab10"><div class="Name">Рабастан Лестрейндж</div></a></span>
<span class="my_span"><a href="#divtab11"><div class="Name">Эммилин Вэнс</div></a></span>
<span class="my_span"><a href="#divtab12"><div class="Name">Эдвард Тонкс</div></a></span>
<span class="my_span"><a href="#divtab13"><div class="Name">Ивонн Сметвик</div></a></span>
<span class="my_span"><a href="#divtab14"><div class="Name">Белинда Яксли</div></a></span>
<span class="my_span"><a href="#divtab15"><div class="Name">Рембрандт Яксли</div></a></span>
<span class="my_span"><a href="#divtab16"><div class="Name">Эдвард Бернс</div></a></span>
<ul>
</td>
<td valign="top" align="left" style="width:350px!important;padding-left:12px;">
<div id="divtab0" class="tab_content" style="DISPLAY: none;">
текст какой-нибудь и картиночка
</div>
<div id="divtab1" class="tab_content" style="DISPLAY: none;">
<img class="Image" src="https://s-media-cache-ak0.pinimg.com/originals/b3/fe/cd/b3fecd31b2d27270c599fc89ed6d7d3a.gif" />
I'll be by your side wherever you fall
<br>In the dead of night whenever you call
<br>----------------------<br></div>
</div>
<div id="divtab2" class="tab_content" style="DISPLAY: none;">
<img class="Image" src="https://s-media-cache-ak0.pinimg.com/originals/5a/2e/d6/5a2ed62c0f43740e70783d710ff95eb5.gif" />
I tried to walk together but the night was growing dark
<br>Thought you were beside me but I reached and you were gone
</div>
<div id="divtab3" class="tab_content" style="DISPLAY: none;">
<img class="Image" src="http://68.media.tumblr.com/5af37f04d9b57b0cb26d0c3c804028ea/tumblr_mp0wfpXyyD1rd9099o4_r3_250.gif" />
текст много текста еще больше текста больше текста богу текста
текст текст тект текстище
</div>
<div id="divtab4" class="tab_content" style="DISPLAY: none;">
<img class="Image" src="http://68.media.tumblr.com/tumblr_m5mnsmqdHM1qb6vb1o1_250.gif" />
текст много текста еще больше текста больше текста богу текста
текст текст тект текстище
</div>
<div id="divtab5" class="tab_content" style="DISPLAY: none;">
<img class="Image" src="http://68.media.tumblr.com/tumblr_m78n9gfk4p1rwjvh4o9_250.gif" />
текст много текста еще больше текста больше текста богу текста
текст текст тект текстище
</div>
<div id="divtab6" class="tab_content" style="DISPLAY: none;">
<img class="Image" src="https://68.media.tumblr.com/43c90215bad0e7233f3181c9421a26a8/tumblr_n8qnkz2GOQ1tqnd81o8_250.gif" />
текст много текста еще больше текста больше текста богу текста
текст текст тект текстище
</div>
<div id="divtab7" class="tab_content" style="DISPLAY: none;">
<img class="Image" src="http://f.mypage.ru/895c9b59dbe0df5fbb52b0899be12883_c99af49cde78968470d43c87d5bf532d.jpg" />
текст много текста еще больше текста больше текста богу текста
текст текст тект текстище
</div>
<div id="divtab8" class="tab_content" style="DISPLAY: none;">
<img class="Image" src="http://media.tumblr.com/626067f52450993ef5a46c2c7b6d364b/tumblr_inline_mvwx1pMJGl1rsud01.gif" />
текст много текста еще больше текста больше текста богу текста
текст текст тект текстище
</div>
<div id="divtab9" class="tab_content" style="DISPLAY: none;">
<img class="Image" src="http://68.media.tumblr.com/8e88e81cb2e843f5f3d95e111cb0631a/tumblr_inline_mucavn8g4B1rl917s.gif" />
текст много текста еще больше текста больше текста богу текста
текст текст тект текстище
</div>
<div id="divtab10" class="tab_content" style="DISPLAY: none;">
<img class="Image" src="https://68.media.tumblr.com/cce5662c276a6f2d05c51d8eb2b27822/tumblr_msrnjl11q91s0rjebo1_250.gif" />
текст много текста еще больше текста больше текста богу текста
текст текст тект текстище
</div>
<div id="divtab11" class="tab_content" style="DISPLAY: none;">
<img class="Image" src="https://31.media.tumblr.com/e89a7ebdb3f96a6db5c10be65d62c63e/tumblr_myngns4hS61rtzmfqo4_250.gif" />
<b>стажер в отделении недугов от заклятий</b><br><br>
текст много текста еще больше текста больше текста богу текста
текст текст тект текстище
</div>
<div id="divtab12" class="tab_content" style="DISPLAY: none;">
<img class="Image" src="http://24.media.tumblr.com/ff4274dad3343c4523a50b33499e24c1/tumblr_moowcaf92Q1qattp2o1_250.gif" />
<b>целитель в отделении недугов от заклятий</b><br><br>
текст много текста еще больше текста больше текста богу текста
текст текст тект текстище
</div>
<div id="divtab13" class="tab_content" style="DISPLAY: none;">
<img class="Image" src="http://24.media.tumblr.com/d5cde9772280d9e15aacf56da3f9bf4e/tumblr_mme6dby9YQ1s5grv3o4_250.gif" />
<b>сотрудник бюро регистрации и контроля оборотней</b><br><br>
текст много текста еще больше текста больше текста богу текста
текст текст тект текстище
</div>
<div id="divtab14" class="tab_content" style="DISPLAY: none;">
<img class="Image" src="http://images6.fanpop.com/image/photos/34700000/Dr-Bedelia-Du-Maurier-hannibal-tv-series-34746373-245-245.gif" />
<b>глава попечительского совета Больницы св. Мунго</b><br><br>
текст много текста еще больше текста больше текста богу текста
текст текст тект текстище
</div>
<div id="divtab15" class="tab_content" style="DISPLAY: none;">
<img class="Image" src="http://68.media.tumblr.com/7a9acc09c06427fcc0a4689261894995/tumblr_inline_motn0uxOhy1s1r3f8.gif" />
<b>глава отдела регулирования магических популяций и контроля над ними</b><br><br>
текст много текста еще больше текста больше текста богу текста
текст текст тект текстище
</div>
<div id="divtab16" class="tab_content" style="DISPLAY: none;">
<img class="Image" src="http://68.media.tumblr.com/6843767a3fdf7afac9b7534eeb50f7c3/tumblr_inline_oaw33lXTvt1rifr4k_500.gif" />
<b>глава отдела тайн</b><br><br>
текст много текста еще больше текста больше текста богу текста
текст текст тект текстище
</div>
</td>
</tr>
<script type="text/javascript">
$(document).ready(function() {
$(".buttonContent").hide();
$("ul.Mubs .MyButton").click(function() {
$("ul.Mubs .MyButton").removeClass("active");
$(this).addClass("active");
$(".buttonContent").hide();
var activeDiv = $(this).find("a").attr("href");
$(activeDiv).fadeIn();
return false;
});
$(".tab_content").hide();
<!--$(".tabs a:first").addClass("active").show(); -->
$(".tab_content:first").show();
$("ul.tabs .my_span").click(function() {
$("ul.tabs .my_span").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
$(".buttonContent").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
</table></center>
