Tengo una página html con dos botones que intercambian la visibilidad de los divs asociados. El evento de clic en los botones funciona en el escritorio pero no en mi móvil Android. ¿Cómo hago para que esto funcione tanto en el escritorio como en el móvil? Además, el enlace href no funciona en dispositivos móviles.
extracto de código html
<div class="content" id="calculator"> <button id="details" class="tab-button">Details</button> <button id="result" class="tab-button">Result</button> <div id="details-content"> Details </div> <div id="result-content" class="chart-container" onresize="responsiveFonts()"> <canvas id="StackedbarChartCanvas"></canvas> </div> </div> <p class="center-text">Please read the <a class="link" href="disclaimer.php">Disclaimer</a></p>CSS
.tab-button{ border-radius: 5px; border: 1px solid #000; padding: 5px 10px; background: yellow; font-size: 1em; cursor: pointer; } #details-content { display: block; } #result-content { display: none; }código JavaScript
$(document).ready(function() { $("#result").on("click", function(evt) { displayResultContent(); }); $(document).on('click', '#details', function() { displayDetails(); }); }); function displayResultContent() { document.getElementById("details-content").style.display="none"; document.getElementById("result-content").style.display="block"; calculateResult(); } function displayDetails() { document.getElementById("details-content").style.display="block"; document.getElementById("result-content").style.display="none"; }Tienes la mitad del código javascript de vainilla y la mitad de jquery. No todos los dispositivos móviles funcionan adecuadamente con un javascript puro, casi todo funciona con jquery.
$(document).ready(function() { $('#result').click(function() { $('#details-content').hide(); $('#result-content').show(); calculateResult(); }); $('#details').click(function() { $('#details-content').show(); $('#result-content').hide(); }); $(window).resize(function() { responsiveFonts(); }); }); function calculateResult(){ alert('this function -> "calculateResult"'); /* for example... */ } function responsiveFonts(){ console.log('hello foom funcion "responsiveFonts"');/* for example... */ } .tab-button{ border-radius: 5px; border: 1px solid #000; padding: 5px 10px; background: yellow; font-size: 1em; cursor: pointer; } #details-content { display: block; } #result-content { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="content" id="calculator"> <button id="details" class="tab-button">Details</button> <button id="result" class="tab-button">Result</button> <div id="details-content"> Details </div> <div id="result-content" class="chart-container"> <canvas id="StackedbarChartCanvas"></canvas> </div> </div> <p class="center-text">Please read the <a class="link" href="/disclaimer.php">Disclaimer</a></p>