Выполнение по клику и при загрузке

[Nikita21]

Всем привет. Помогите, пожалуйста, новичку.
Хочу сделать, чтобы два блока удалялись в зависимости от табов, при этом, что бы это происходило при экране >=720px.

На данный момент сделал 2-х ступенчатые условия, где:
Если нет клика по элементу, то выполняется функция, если клик есть, то выполняется такая же, скопированная функция. Что-то мне подсказывает, что есть другой способ, но ситаксис плохо знаю.

<div id="event_tabs" style="display: block;">
<ul>
<li class="active"><a href="kino" data-id="kino" class="btn"></a>
</li><li class=""><a href="clubs" data-id="clubs" class="btn"></a>
</li><li class=""><a href="theater" data-id="theater" class="btn"></a>
</li><li class=""><a href="others" data-id="others" class="btn"></a></li>        
</ul>
</div>

<div id="bottom_afisha" class="clearfix"></div>
<div id="yandex_ad_afisha_123"></div>

var direct = jQuery('.direct_container_afisha');
var bottom = jQuery('#bottom_afisha');
  
if (jQuery("#event_tabs li a").click) {
  jQuery("#event_tabs li a").click(function() {
if (jQuery(window).width() >= 720 && jQuery('#event_tabs li.active a').data( "id" ) == "kino"){
direct.detach(); 
bottom.live();
}
else if (jQuery(window).width() >= 720 && jQuery('#event_tabs li.active a').data( "id" )=="others") {
  direct.live();
bottom.detach();}
})}

else {
if (jQuery(window).width() >= 720 && jQuery('#event_tabs li.active a').data( "id" ) == "kino"){ 
  direct.detach(); 
  bottom.live();
}
else if (jQuery(window).width() >= 720 && jQuery('#event_tabs li.active a').data( "id" ) == "others") {
  direct.live();
  bottom.detach();}}

[Dilettante_Pro]

Nikita21,
Строки 6-12 вписать в отдельную функцию, к которой обращаться при загрузке и по клику (м.б. еще по ресайзу?)

[Nikita21]

Nikita21,
Строки 6-12 вписать в отдельную функцию, к которой обращаться при загрузке и по клику (м.б. еще по ресайзу?)

Вроде бы сделал так, но не работает

window.onload=function(){
var direct = jQuery('.direct_container_afisha')
var bottom = jQuery('#bottom_afisha')

if (jQuery(window).width() >= 720){
if (jQuery('#event_tabs .active a[data-id="kino"]').click) {
direct.detach(); 
bottom.live();}
else if (jQuery('#event_tabs .active a[data-id="clubs"]').click) {
  direct.live();
bottom.detach();}
else if (jQuery('#event_tabs .active a[data-id="theater"]').click) {
  direct.live();
bottom.detach();}
else if (jQuery('#event_tabs .active a[data-id="others"]').click) {
  direct.live();
bottom.detach();}
}}

Может я неарвильно определяю data-id?

[dd_smol]

Если честно не совсем понимаю чего вы пытаетесь сделать но ...

jQuery(function ( $ ) {
	var direct = $('.direct_container_afisha'),
		bottom = $('#bottom_afisha');
		
	$('#event_tabs a').on('click', function ( e ) {
		if ( window.innerWidth > 720 || !$( this.parentNode ).hasClass('active') ) {
			return false;
		}

		switch( $(this).data('id').toLowerCase() )  {
			case 'kino': 
				direct.detach();
				bottom.click();
				break;
			case 'clubs':
			case 'theater':
			case 'others':
				bottom.detach();
				direct.click();
				break;
			
		}

		return false;
	});
});

[Nikita21]

Если честно не совсем понимаю чего вы пытаетесь сделать но ...

Есть страница на которой есть 4 таба. Табы различаются только по data-id.

<ul>
<li class="active"><a href="kino" data-id="kino" class="btn"></a>
</li><li class=""><a href="clubs" data-id="clubs" class="btn"></a>
</li><li class=""><a href="theater" data-id="theater" class="btn"></a>
</li><li class=""><a href="others" data-id="others" class="btn"></a></li>        
</ul>
</div>

Нужно, чтобы на табе "kino", который изначально активный. Удалялся блок <div id="yandex_ad_afisha_123"></div>, а на других табах появлялся, и при этом удалялся другой блок <div id="bottom_afisha" class="clearfix"></div>. И все это работало только при экране >720.

Если делать вызов функции только по клику, то она не срабатывает изначально. Если делать без клика, то функция срабатывает единожды, при загрузке страницы.

[Nikita21]

Если честно не совсем понимаю чего вы пытаетесь сделать но ...

Спасибо за помощь. Сделал вот так. Может быть кому понадобится.

window.onload=function(){ 
  var direct = jQuery('.direct_container_afisha') 
  var bottom = jQuery('#bottom_afisha')  
  if (jQuery(window).width() >= 720){
  if (jQuery('#event_tabs .active a[data-id="kino"]').length > 0){direct.hide();  bottom.show();}
 
jQuery('#event_tabs li a[data-id="kino"]').click(function() { direct.hide();  bottom.show();}); 
jQuery('#event_tabs li a[data-id="clubs"]').click(function() {   direct.show(); bottom.hide();});
jQuery('#event_tabs li a[data-id="theater"]').click(function() {direct.show(); bottom.hide();}); 
jQuery('#event_tabs li a[data-id="others"]').click(function() { direct.show(); bottom.hide();} );
  }
}