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

Всем привет. Помогите, пожалуйста, новичку.
Хочу сделать, чтобы два блока удалялись в зависимости от табов, при этом, что бы это происходило при экране >=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();}}

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?

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

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;
	});
});

Есть страница на которой есть 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.

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

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

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();} );
  }
}