Блог

Главная - Вопросы по программированию - Добавление стиля в заголовок при нажатии на div с помощью Javascript

Добавление стиля в заголовок при нажатии на div с помощью Javascript

#javascript #css #html

#javascript #css #HTML

Вопрос:

Я намерен добавить класс в заголовок при нажатии на div. Я включил веб-сайт, с которым я работаю, просто чтобы упростить задачу:

URL-адрес — http://itsmontoya.com/work/iM /

Я добавил класс «расширенный» в заголовок. Это должно показать, как должна выглядеть навигация после нажатия кнопки. Я создал простой Javascript, который должен выдавать предупреждение при нажатии кнопки. Кажется, я не могу заставить это работать. Есть идеи о том, что я сделал не так?

Спасибо!

РЕДАКТИРОВАТЬ — я смог заставить оповещение правильно работать при нажатии кнопки div. Я очень близок к завершению! 🙂 Теперь я застрял с неправильной передачей переменной. 

 <script type= "text/javascript">
var expanded = false;
function btnClick(){
    alert('The variable expanded is ' expanded);
    if(expanded === false) {
        document.getElementById("header").className = "expanded";
        var expanded = true;
    } else {
        document.getElementById("header").className.replace(/bexpandedb/,'');
        var expanded = false;
    }
};
</script>

Сейчас я обновляю ftp-сервер 🙂

Комментарии:

1. Проверьте мой ответ на наличие полного рабочего источника.

Ответ №1:

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

У вас есть:

 <script type= "text/javascript">
$("#expandBtn").click(function(){
   alert('hello');
});
</script>

Я думаю, что вы хотите:

 <script type= "text/javascript">
$(document).ready(function(){
  $("#expandBtn").click(function(){
     alert('hello');
     $('header').addClass('expanded');
  });
});
</script>

Документация API будет вашим другом здесь. Первый шаг — ready() .

Обновить

У вас есть этот вызов jQuery:

 $j('#header').addClass('expanded');

Но ваша разметка предназначена для элемента HTML5 <header> . В этом случае ваш jQuery необходимо изменить на:

 $j('header').addClass('expanded');

Где $j находится ваш объект jQuery. Более обычно вы бы использовали $ или jQuery .

Время сосредоточиться на селекторах jQuery!

Обновить

Вот ваша обновленная страница:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>itsMontoya</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script type= "text/javascript">
    $(document).ready(function(){
        $('.expandBtn').bind('click', function(){
            $('header').toggleClass('expanded');
        });
    });
    </script>
</head>
<body>
    <div class="wrap">
        <header id="header" class="">
            <div class="blackBG transparent"></div>
            <nav>
                <ul>
                    <li>
                        Home<img src="images/home.png">
                    </li>
                    <li>
                        Pictures<img src="images/pictures.png">
                    </li>
                    <li>
                        Music<img src="images/mymusic.png">
                    </li>
                    <li>
                        About Me<img src="images/aboutme.png">
                        </li>
                    <li>
                        Resume<img src="images/resume.png">
                    </li>
                </ul>
            </nav>
            <div id="logo" class="logo"><p>itsMontoya</p></div><div id="expandBtn" class="expandBtn anchor"></div>
        </header>
        <section class="content">
            <article class="blogEntry"></article>
        </section>
        <footer class="anchor">
            <div class="over anchor"><p>2011 itsMontoya.com</p></div>
            <div class="blackBG transparent anchor under"></div>
        </footer>
    </div>
</body>
</html>

Комментарии:

1. W00t! Это сработало очень хорошо, и код был очень чистым и простым.

2. Рад помочь. Мое предложение: проверьте эту страницу селекторов на сайте jQuery. Я также думаю, что вы многое получите от jqueryfordesigners.com . Как только вы прочтете немного больше, вы сможете сразу увидеть разницу между $('header') и $('#header') и $('.header') . Добро пожаловать в StackOverflow!

3. Я решил добавить к этому элемент движения для более чистого эффекта. Не могли бы вы указать мне правильное направление для правильного переключения между входом и выходом?

4. Я смог изменить класс кнопки при нажатии. Кажется, на данный момент я не могу заставить анимацию вернуться к работе. Тем не менее, я добиваюсь хорошего прогресса! www.itsmontoya.com/work/iM/

5. Я смог установить значение window, которое переносится во все функции. Затем я создал оператор if / else, чтобы выбрать, какая анимация. Теперь входит и выходит. 🙂

Ответ №2:

Использование jQuery:

 $('#your_div_id').click(function(){
    console.log("Clicked.");
    $("#header").addClass('expanded');
});

Обновить

В вашем коде:

 var expanded = false;
function btnClick(test){
    if($expanded === false) {
        .
        .
        .

Что, черт $expanded возьми, такое? Обратите внимание, что в JavaScript нам не нужен $ знак для переменных.

Ответ №3:

Вот как вы могли бы привязать обработчик кликов к своему div и добавить класс в свой заголовок:

 var yourDiv = document.getElementById('your-div-id');
var header = document.getElementById('header');

yourDiv.onclick = function(){
    alert("yourDiv was clicked");
    header.className = "newCssClass";
};

Приведенное выше предполагает разметку следующим образом:

 <div id="your-div-id">Click</div>
<div id="header"></div>

Вот пример.

Обновление: причина, по которой expanded переменная работает не так, как вы ожидаете, заключается в том, что вы создаете дублирующуюся локальную переменную, вызываемую expanded в вашем btnClick() методе. В результате глобальная expanded переменная, которую вы объявляете вне функции, никогда не обновляется.

Это вызвано тем, как вы используете var ключевое слово:

  1. При использовании вне функции var создает глобальную переменную, доступную в любом месте текущего документа.
  2. При использовании внутри функции var создается локальная переменная, доступная только внутри этой функции.

Вот ваша функция, очищенная для работы так, как вы ожидаете:

 // Define global variable (using var outside function)
var expanded = true; 
function btnClick(){   

    alert('The variable expanded is ' expanded);

    // Condition for true
    if(expanded) {
        // do something

    // Condition for false
    } else {
        // do something else
    }

    // Flips boolean value of the global variable (notice lack of var keyword)
    expanded = !expanded;    
}

Вот пример, показывающий правильный способ обновления expanded переменной.

Комментарии:

1. Я бы предпочел пройти весь маршрут Javascript, подобный этому. Я добился значительного прогресса в том, что я собирался. Прямо сейчас у меня возникли проблемы с переменной ‘expanded’, проходящей через функцию. Есть идеи?

2. Да, ваша проблема — var ключевое слово. Проверьте мой обновленный ответ.

3. Я обновил скрипт на своем веб-сервере до метода, показанного в вашем примере, и jsfiddle. Я не могу заставить событие onClick работать. Я не уверен, какую часть я настроил неправильно:(.