0

Gostaria de remvover o href de um elemento somente na versão mobile, que seria em 769px, o href que eu gostaria de remover é de um menu, esse menu é o mesmo da versão da desktop, só ganha outro css ao entrar em 769px, tentei adicionar uma nova classe ao entrar em 769px para poder modificar esse href sem ter que mexer no menu desktop, só que não funciona, quando ele volta a versão desktop está com o href removidos.

Essa classe .menu-mobile só existe em 769px e some ao passar de 769px, mas como o menu é o mesmo em ambos tamanhos ele só ganha uma classe a mais, acredito que esse seja o motivo de não funcionar, pelo fato de ele voltar ele somente perde a classe, mas a alteração já está feita logo perder essa classe não tem efeito algum. Como eu poderia resolver isso? Remover o href somente em 769px.

Código que tentei usar

$j(document).ready(function() {
    $j('.menu-mobile a').removeAttr('href');
});

3 Respostas 3

1

Este código irá funcionar nos navegadores modernos. Ele adiciona (ou mantém) os hrefs quando a resolução for maior ou igual a 769px e retira-os quando for menor ou igual a isso, sempre que a página for carregada ou redimensionada. Criei uma array para armazenar os hrefs e recuperá-los quando necessário:

temp_href = [];
$(window).on("load resize", function(){
    els = $(".menu-mobile a");
    if(window.innerWidth <= 769){
        for(x=0;x<els.length;x++){
            if(temp_href.length != els.length){
                temp_href.push(els.eq(x).attr("href"));
            }
            els.eq(x).removeAttr('href');
        }
    }else if(temp_href.length != 0){
        for(x=0;x<els.length;x++){
            els.eq(x).attr('href',temp_href[x]);
        }
    }
});

temp_href = [];
$(window).on("load resize", function(){
	els = $(".menu-mobile a");
	if(window.innerWidth <= 769){
		for(x=0;x<els.length;x++){
			if(temp_href.length != els.length){
				temp_href.push(els.eq(x).attr("href"));
			}
			els.eq(x).removeAttr('href');
		}
	}else if(temp_href.length != 0){
		for(x=0;x<els.length;x++){
			els.eq(x).attr('href',temp_href[x]);
		}
	}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-mobile">
	<a href="#1">Link 1</a>
	<br />
	<a href="#2">Link 2</a>
</div>

1
  • Cara exatamente isso muito obrigado!! Eu precisava salvar o valor para poder usa-lo novamente ao redimensionar a tela, obrigado.
    – Snake
    Commented 17/10/2017 às 17:54
0

Utilize "window.innerWidth" ele ira pegar o tamanho total do site.

$(document).ready(function() {  
   var windowWidth = window.innerWidth;

   if(windowWidth <= 769) {
     $('.menu-mobile a').removeAttr('href');
   }
});

Tenta esse código então:

function eDesktop() {
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    return false;
  } else {
    return true;
  }
}

if(!eDesktop){
  $('.menu-mobile a').removeAttr('href')
}

jQuery(document).ready(function($) {
      if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )         {
         
          $('.teste2').removeClass('teste');
       }
 });
.teste {
width: 500px;
height: 500px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="teste teste2">
</div>

5
  • Já tentei desta maneira, ele remove se você abre na versão mobile e se você abre na versão desktop está lá, "funciona" mas eu gostaria de além da função de abrir naquela tela se fizesse a transição de uma tela pra outra também funcionasse. Se você ler a pergunta(não sei se ficou confusa) vai ver que o problema é ao fazer a transição. Se você pegar manualmente e for diminuindo o tamanho da tela até chegar na versão mobile e vice-versa.
    – Snake
    Commented 16/10/2017 às 18:54
  • Tenta o código que alterei Commented 16/10/2017 às 19:08
  • so tirar o exclamação do if, ele esta ali para mostrar que funciona se negar para desktop Commented 16/10/2017 às 19:10
  • Aqui o código não funcionou, tipo o primeiro que você mandou funciona, ele remove o href somente na tela de 769px, mas isso eu também já consegui fazer, o que eu queria era que ao transitar(arrastar até o pixel diminuir) entre os tamanhos de tela ele adicionasse e removesse o href, porém como o menu é feito pelo backend(php) ele o constrói de uma maneira que não consigo simplesmente colocar um if windowWidth <= 769 $j('#a').removeAttr('href'); else $j('#a').attr('href="valorinicial"');
    – Snake
    Commented 16/10/2017 às 19:33
  • Nesse caso, o seu código js, precisa executar quando o seu site tiver terminado de carregar, porque, quando o seu php executar o js vira depois e removera o link, você pode jogar o seu script no final do seu site, depois do menu gerado pelo php. Commented 17/10/2017 às 11:29
0

Só complementando, para obter o controle do redimensionamento do navegador basta usar o método resize do jquery, exemplo

$(document).ready(function() {  
   windowWidth = window.innerWidth;

   if(windowWidth <= 769) {
     $('.menu-mobile a').removeAttr('href');
   }

function onResize(){
   windowWidth = window.innerWidth;

   if(windowWidth <= 769) {
     $('.menu-mobile a').removeAttr('href');
   }
                   }

$(window).on('resize', onResize);

});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .