В зависимости от выбранной вкладки присваивать словло

[Mrs.Haneki]

Добрый день. Имеются обычные вкладки:

<ul class="tabs">
    <li class="tabs1 active">
        <a href="#right">Правая вкладка</a>
    </li>
    <li class="tabs2">
        <a href="#left">Левая вкладка</a>
    </li>
</ul>
<div id="right">содержимое блока</div>
<div id="left">содержимое блока</div>
 
<div class="word">
    <p>Добро пожаловать <span style="display: none;">к нам</span></p>
</div>

Нужно, чтоб по нажатию на левую вкладку <span>к нам</span> был display: block; А когда нажимаешь на правую вкладку, то display: none;

Помещать div class="word" внутри вкладок нельзя
Помогите реализовать пожалуйста. не получается

вариант был такой:

$(function () {
    if ($('.tabs .tabs2').hasClass('active')) {
        $('.word span').show();
    }
  
    if ($('.tabs .tabs1').hasClass('active')) {
        $('.word span').hide();
    }
});

[Manyasha]

Mrs.Haneki, здравствуйте, может так?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function () {
    $('.tabs').click(function(){
		$('.word span').toggle();
	});
});
</script>
<ul class="tabs">
    <li class="tabs1 active">
        <a href="#right">Правая вкладка</a>
    </li>
    <li class="tabs2">
        <a href="#left">Левая вкладка</a>
    </li>
</ul>
<div id="right">содержимое блока</div>
<div id="left">содержимое блока</div>
  
<div class="word">
    <p>Добро пожаловать <span style="display: none;">к нам</span></p>
</div>

[Mrs.Haneki]

Manyasha, нет( по нажатию несколько раз на левую или правую вкладку, слово "к нам" появляется и исчезает.
Надо чтоб на левую вкладку только появлялось, а на правую только исчезало

[Manyasha]

Mrs.Haneki,
невнимательно прочитала...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function () {
    $('.tabs').on("click", "li", function(){
		if ($(this).hasClass('tabs2')){
			$('.word span').show();
		}else{
			$('.word span').hide();
		}
	});
});
</script>
<ul class="tabs">
    <li class="tabs1 active">
        <a href="#right">Правая вкладка</a>
    </li>
    <li class="tabs2">
        <a href="#left">Левая вкладка</a>
    </li>
</ul>
<div id="right">содержимое блока</div>
<div id="left">содержимое блока</div>
  
<div class="word">
    <p>Добро пожаловать <span style="display: none;">к нам</span></p>
</div>

[Mrs.Haneki]

Manyasha, это работает, да. Но при обновлении страницы, слово "к нам" появляется и исчезает только по клику на вкладку. Как это можно исправить?

[Mrs.Haneki]

Manyasha, https://jsfiddle.net/ey3hoqbs/1/

[Manyasha]

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>