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>