Показать сообщение отдельно
  #7 (permalink)  
Старый 12.09.2016, 17:05
Профессор
Отправить личное сообщение для Manyasha Посмотреть профиль Найти все сообщения от Manyasha
 
Регистрация: 21.09.2015
Сообщений: 196

Mrs.Haneki,
а так?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
#wr-tabs{
	width: 700px;
	margin: 40px auto 0;
}
#wr-tabs .tabs{
	background-color: #fff;
	margin-bottom: 3px;
}
#wr-tabs .tabs:after{
	content: '';
	display: block;
	clear: both;
	height: 0;
}
#wr-tabs .tabs .tab{
	float: left;
	cursor: pointer;
	border-right: 1px solid #f2f4f9;
	padding: 10px 20px;
}
#wr-tabs .tabs .tab:last-child{
	border-right: none;
}
#wr-tabs .tabs .tab:hover,
	#wr-tabs .tabs .tab.active{
		background-color: #c7e7f9;
		color: #1d7ee4;
	}
#wr-tabs .content{
	background-color: #fff;
}
#wr-tabs .content .tab-cont{
	display: none;
	padding: 15px 10px;
}
#wr-tabs .content .tab-cont.active{
	display: block;
}
</style>
<script>
$(function () {
	
	var numTab = localStorage.getItem('activeElement') || 0;
	setClass(numTab);

    $("#wr-tabs").on("click", ".tab", function(){
		setClass($(this).index());
	});
	
	function setClass(numTab){
        if (numTab == 1){
            $('.word span').show();
        }else{
            $('.word span').hide();
        }
		
		var tabs = $("#wr-tabs .tab"),
			cont = $("#wr-tabs .tab-cont");
		tabs.removeClass("active");
		cont.removeClass("active");
		$(tabs).eq(numTab).addClass("active");
		cont.eq(numTab).addClass("active");
		localStorage.setItem('activeElement', numTab);
    }
	
});
</script>
<div id="wr-tabs">
	<div class="tabs">
		<div class="tab tabs">Вкладка №1</div>
		<div class="tab tabs">Вкладка №2</div>
	</div>
	<div class="content">
		<div class="tab-cont">
			Контент №1
		</div>
		<div class="tab-cont">
			Контент №2
		</div>
	</div>
</div>

<div class="word">
    <p>Добро пожаловать <span>к нам</span></p>
</div>
Ответить с цитированием