Javascript Toggling Видимость Вопрос

Question

Хорошо, поэтому я пытаюсь заставить этот кусок Javascript работать. Кроме того, я совершенно новичок в Javascript. По сути, я пытаюсь сделать так, чтобы в левой части моей страницы у меня было меню со ссылками: главная страница, информация о, ответ, сценарий, финальный проект и контакт. Каждый из них имеет помеченный div-идентификатор (то есть #home, #about, #response ...) на моей странице CSS, и все они расположены на одной и той же позиции на странице и скрыты. При нажатии на ссылку соответствующий идентификатор div должен стать видимым на странице. Код, который я использую, это:

function show(listx) {

     home.style.visibility = "hidden"
     about.style.visibility = "hidden"
     response.style.visibility = "hidden"
     script.style.visibility = "hidden"
     project.style.visibility = "hidden"
     contact.style.visibility = "hidden"

     listx.style.visibility = "visible"

     }

function shows(listz) {

     home.style.visibility = "hidden"
     about.style.visibility = "hidden"
     response.style.visibility = "hidden"
     script.style.visibility = "hidden"
     project.style.visibility = "hidden"
     contact.style.visibility = "hidden"

     listz.style.visibility = "visible"

     } 

Я адаптировал этот код из старого сценария, который я нашел под названием Fade in Menu Script от Felipe Bottrel Souza 1998.

Проблема в том, что этот скрипт работает в IE, Chrome и Safari, но не в Firefox.

Любые идеи / помощь с благодарностью!

Answer 1

Предоставление чего-либо id не должно автоматически давать ему имя в JavaScript. Многие браузеры делают это для совместимости со старым кодом, но, как вы заметили, он ненадежен и его следует избегать.

Вместо этого вы должны использовать метод document.getElementById для ссылки на элемент по id.

Например, вы можете заменить каждый экземпляр home на document.getElementById("home") или определить все элементы, к которым вы хотите получить доступ при первом использовании:

var home = document.getElementById("home");

Answer 2

Я рекомендую использовать библиотеку javascript, такую ​​как jQuery, prototype, MooTools или что-то еще.Все, что угодно.

Если вы новичок в javascript, не тратьте время на знакомство с DOM.Это займет у вас целую вечность, и вы все равно не сможете сделать то, что другие могут сделать очень быстро, и вы не сможете сделать это кросс-браузерно, с высокой эффективностью, с исправленными ошибками.код, с которым вы боретесь, можно сделать примерно так.Для начала, поскольку они все (теоретически) в контейнере div и являются братьями и сестрами друг друга, это должно быть супер просто:

$('#listx').show().siblings().hide();

Вау!одна строка кода.Очень просто.Хватит тратить время на сырой JavaScript!

Answer 3

Вот гораздо более компактный способ кодирования этого:

Сделайте так, чтобы все эти объекты на вашей странице имели идентификаторы CSS, соответствующие этим именам.

var hideList = ["home", "about", "response", "script", "project", "contact"];

function show(listx) {
    for (var i = 0; i < hideList.length; i++) {
        document.getElementById(hideList[i]).style.visibility = "hidden";
    }
    document.getElementById(listx).style.visibility = "visible";
}

Я не вижу необходимости в отдельных функцияхдля show() и shows(), поскольку они только различаются в переданном параметре, поэтому вы можете просто передать соответствующее имя объекта одной функции.

Если вы используете современную библиотеку, такую ​​как jQuery или YUI, вы можете простодайте каждому объекту, который вы хотите скрыть, конкретное имя класса, и затем вы можете извлечь все объекты на странице с этим именем класса в массив в одном вызове функции, а затем обработать элементы в этом массиве.Это более удобно, потому что если содержимое страницы изменяется, код не должен быть изменен для соответствия.

Answer 4

Вызов переменных «home», «about» и т. Д. Не указывает на идентификаторы div, если вы не установили их при загрузке страницы. Попробуйте это:

var home, about, response, script, project, contact, listx;
window.onload = function() {
    home = document.getElementById('home');
    about = document.getElementById('about');
    response = document.getElementById('response');
    script = document.getElementById('script');
    project = document.getElementById('project');
    contact = document.getElementById('contact');
    listx = document.getElementById('listx');
}