Элемент HTML Absolute onclick возвращается в начало страницы

Я работаю над сайтом, и я создал свое собственное меню для сайта. Таким образом, меню скрыто с непрозрачностью 0 и z-index -1. при нажатии кнопки меню отобразится на экране.

https://williamhrtanto.com/msa/about/ это сайт, над которым я работаю, так что вы, ребята, можете напрямую проверить, как он работает в настоящее время

текущая проблема заключается в том, что всякий раз, когда я нажимаю кнопку, чтобы отобразить меню, оно вернется в верхнюю часть страницы.

Я спрашиваю, где бы я ни щелкнул, меню появится и не вернется в верхнюю часть страницы.

Я пробовал с фиксированным положением и абсолютным положением

Спасибо

Я думаю, что меню работает нормально. Проблема только в черном цвете. Попробуйте изменить цвет тега привязки меню.

Ram Ratan Bairar 02.05.2018 06:34
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
96
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

  1. Убрать непрозрачность
  2. Установить отображение: нет, положение: фиксированное
  3. После щелчка установить блок отображения
Ответ принят как подходящий

У вас есть этот JS-код на вашей странице:

<script>
    jQuery(document).ready(function($){
    // now you can use jQuery code here with $ shortcut formatting
    // this will execute after the document is fully loaded
    // anything that interacts with your html should go here

    var buttonMenu = $('#menuButtonContainer');
    var menuScreen = $('#menue');

    buttonMenu.click(function(){
        //alert('clicked');
        if (menuScreen.css('opacity')=='0'){
            menuScreen.css('opacity', '1');
            menuScreen.css('z-index', '999');
        }
        else {
            menuScreen.css('opacity','0');
            menuScreen.css('z-index','-1');
        }
    });

}); 
</script>

в этом месте:

buttonMenu.click(function(){
    //alert('clicked');

изменить на

buttonMenu.click(function(e){
    e.preventDefault();
    //alert('clicked');


note the e added as function argument and the new line e.preventDefault();

благодарю вас ! Я добавляю preventdefault и устанавливаю в меню фиксированное значение

William Hartanto 02.05.2018 07:10

Вам нужно отменить событие по умолчанию для тега привязки.

Использовать это

$("#buttonMenue").click(function(evt) {
   evt.preventDefault();
});

Другие вопросы по теме