Тема: Вопрос Несколько вопросов
Показать сообщение отдельно
Старый 27.04.2014, 09:26 Вверх   #6
Грамотный форумчанин
 
Аватар для iKing
iKing вне форума
Доп. информация
По умолчанию

Kostman,

Вот скрипт блоков стави в удобное место :
Код:
<div id="center-block1">
<div id="center-block">

<script type="text/javascript">
$(document).ready(function(){
$('#switch1').click(function() {
 $('#switch_content1').show().animate({opacity: 1}, 400);
 $(this).addClass("ts_1");
 $('#sw_info').replaceWith("<a id='sw_info' href='http://buy-banner.com/link/3928' target='_blank'>Купить ссылку. Цена - 10руб.</a>");
 $('#switch_content2').hide().animate({opacity: 0}, 400);
 $('#switch2').removeClass("ts_2");
 $('#switch_content3').hide().animate({opacity: 0}, 400);
 $('#switch3').removeClass("ts_3");
 });
 $('#switch2').click(function() {
 $('#switch_content1').hide().animate({opacity: 1}, 400);
 $(this).addClass("ts_2");
 $('#sw_info').replaceWith("<span id='sw_info'>Топ пользователей</span>");
 $('#switch_content2').show().animate({opacity: 1}, 400);
 $('#switch1').removeClass("ts_1");
 $('#switch_content3').hide().animate({opacity: 0}, 400);
 $('#switch3').removeClass("ts_3");
 });
 $('#switch3').click(function() {
 $('#switch_content1').hide().animate({opacity: 1}, 400);
 $(this).addClass("ts_3");
 $('#sw_info').replaceWith("<span id='sw_info'>Полезная информация</span>");
 $('#switch_content2').hide().animate({opacity: 0}, 400);
 $('#switch2').removeClass("ts_2");
 $('#switch_content3').show().animate({opacity: 1}, 400);
 $('#switch1').removeClass("ts_1");
 });
 });
</script>


<a id="sw_info" href="http://buy-banner.com/link/3928" target="_blank">Купить ссылку. Цена - 10руб.</a>
<div class="fl_r"><div class="switch ts_1" id="switch1" title="При клике откроется Блок 1 - Рекламные ссылки"></div><div class="switch" id="switch2" title="При клике откроется Блок 2 - Топ пользователей"></div><div class="switch" id="switch3" title="При клике откроется Блок 3 - Полезная информация"></div></div>
</div>
<div id="switch_content1" class="sw_cont" style="display: block; opacity: 1;">
<ul>
<li>1. Ваш текст №1</li>
<li>2. Ваш текст №1</li>
<li>3. Ваш текст №1</li>
<li>4. Ваш текст №1</li>
<li>5. Ваш текст №1</li>
<li>6. Ваш текст №1</li>
</ul>
</div>
<div id="switch_content2" class="sw_cont" style="display: none; opacity: 0;">
<ul>
<li><a href="#">Юзер</a> Постов: 0</li>
<li><a href="#">Юзер</a> Постов: 0</li>
<li><a href="#">Юзер</a> Постов: 0</li>
<li><a href="#">Юзер</a> Постов: 0</li>
<li><a href="#">Юзер</a> Постов: 0</li>
<li><a href="#">Юзер</a> Постов: 0</li>
</div>
<ul id="switch_content3" class="sw_cont" style="opacity: 0; display: none;">
<li>1. Ваш текст №3</li>
<li>2. Ваш текст №3</li>
<li>3. Ваш текст №3</li>
<li>4. Ваш текст №3</li>
<li>5. Ваш текст №3</li>
<li>6. Ваш текст №3</li>
</ul>
</div>



<style>#center-head {
width: 100%;
height: 134px;
background: #333;
background: -moz-linear-gradient(top, #333333 0%, #111111 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#111));
background: -webkit-linear-gradient(top, #333 0%,#111 100%);
background: -o-linear-gradient(top, #333333 0%,#111111 100%);
background: -ms-linear-gradient(top, #333333 0%,#111111 100%);
background: linear-gradient(to bottom, #333 0%,#111 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#111111',GradientType=0 );
box-shadow: 0 0 5px #222
}
#center-block {
padding: 7px 0 7px 8px;
border-bottom: 1px solid #616161
}
#center-block1 {
float: left;
width: 250px;
/* background: #1F1F1F; */
margin: 7px -10px;
border-radius: 5px 5px 0 0
}
#switch3 {
border: 2px solid #5ACEA4;
}
#switch2 {
border: 2px solid #FFD600;
}
#switch1 {
border: 2px solid #1968A7;
}
.switch {
width: 8px;
height: 8px;
border-radius: 6px;
display: inline-block;
margin: 2px 3px 0 0;
cursor: pointer
}
#center-block {
padding: 7px 0 7px 8px;
border-bottom: 1px solid #616161;
}
#center-block1 {
float: left;
width: 250px;
background: #1F1F1F;
margin: 7px -10px;
border-radius: 5px 5px 0 0;
}
.sw_info {
font: 13px Century Gothic;
opacity: 0.9999;
}
.fl_r {
float: right;
}
.sw_cont {
padding: 2px 11px;
}
#switch_content2 {
margin-top: -15px;
}
.ts_1 {
box-shadow: 0 0 7px #005ACC;
}
.ts_2 {
box-shadow: 0 0 7px #CC9300;
}
.ts_3 {
box-shadow: 0 0 7px #0F855A;
}
 </style>
И в headinclude в самом низу ставь:
Код:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  Ответить с цитированием
3 пользователя(ей) сказали cпасибо:
 
Время генерации страницы 0.06975 секунды с 10 запросами