Изменение класса <div>с помощью JavaScript - PullRequest
Новая
       27

Изменение класса <div>с помощью JavaScript

2 голосов
/ 23 декабря 2009

Я пытаюсь изменить класс определенных тегов с помощью события onclick (). Основная предпосылка заключается в том, чтобы фоновое изображение каждого тега изменялось, когда пользователь нажимал на них, что стимулировало «выбор меню».

Вот код, который у меня есть: 

<style type="text/css">

.navCSS0
{
    background-image:url('news_selected.png');
    width:222px;
    height:38px;
}

.navCSS1
{
    width:222px;
    height:38px;
}

.container_news
{
    background-image:url('itsupdates.png');
    height:330px;
    width:965px;
}

.container_left
{
    margin-top:90px;
    margin-left:20px;
    float:left;
    height:auto;
    width:auto;
}

</style>
</header>

<script>
//global arrays to store nav positions, menu options, and the info text
var navid_array = new Array();
navid_array[0] = 'nav1';
navid_array[1] = 'nav2';
navid_array[2] = 'nav3';
navid_array[3] = 'nav4';
navid_array[4] = 'nav5';


//Takes the navid selected, and goes into a loop where the background of the selected menu item is changed to a image
//with rounded corners, while the backgrounds of the other menu items are changed back to light grey or stay the same.
//There is also a call to the change_info() function when the selected menu item has been located.
function nav_color_swap(navid)
  {
    for(var i = 0; i < navid_array.length; i++) {
          if(navid == navid_array[i]) 
            {
                document.getElementById(navid).className = "navCSS0";
            }
          else 
            {
                document.getElementById(navid).className = "navCSS1";
            } 
        }
  }

</script>

<body>
<div class="container_news">
<div class="container_left">
    <div class="navCSS1" id="nav1" onclick="nav_color_swap(this.id)"><a href="#" onclick="nav_color_swap(this.id)">Blah 1</a></div>
    <div class="navCSS1" id="nav2" onclick="nav_color_swap(this.id)"><a href="#" onclick="nav_color_swap(this.id)">Blah 2</a></div>
    <div class="navCSS0" id="nav3" onclick="nav_color_swap(this.id)"><a href="#" onclick="nav_color_swap(this.id)">Blah 3</a></div>
    <div class="navCSS1" id="nav4" onclick="nav_color_swap(this.id)"><a href="#" onclick="nav_color_swap(this.id)">Blah 4</a></div>
    <div class="navCSS1" id="nav5" onclick="nav_color_swap(this.id)"><a href="#" onclick="nav_color_swap(this.id)">Blah 5</a></div>
    </div>
    </div>
</body>
</html>

Проблема в том, что когда я запускаю этот код, ничего не происходит ... единственное, что на самом деле меняется, это последний пункт меню ("Бла 5") ... есть мысли?

Ответы [ 4 ]

6 голосов
/ 23 декабря 2009
  • <header> не является элементом, но <head> является.
  • единственными законными детьми <html> являются <head> и <body>. В примере кода есть элемент <script>, который является дочерним по отношению к <html>
  • nav_color_swap устанавливает имя класса для navid, а не navid_array[i], когда navid != navid_array[i]. Вероятно, это источник вашей проблемы.
  • Когда это исправлено, обработчики щелчков для <a> установят имя класса для всех элементов равным navCSS1, поскольку <a> не имеет атрибутов ID.

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

<style type="text/css">
.selected {
    background-image:url('news_selected.png');
}
.news, .news li {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
...
</style>
<script type="text/javascript">
function createNavSelector(curr_nav, selectedClass, unselectedClass) {
    return function (nav) {
        curr_nav.className = unselectedClass;
        curr_nav = nav;
        curr_nav.className = selectedClass;
    }
};
</script>
</head>
<body>
...
<div class="container_news">
  <ul class="news">
    <li id="nav1" onclick="nav_select(this)">Blah 1</li>
    <li id="nav2" onclick="nav_select(this)">Blah 2</li>
    <li id="nav3" class="selected" onclick="nav_select(this)">Blah 3</li>
    <li id="nav4" onclick="nav_select(this)">Blah 4</li>
    <li id="nav5" onclick="nav_select(this)">Blah 5</li>
  </ul>
</div>
<script type="text/javascript">
var nav_select = createNavSelector(document.getElementById('nav3'), 'selected', '');

Поскольку #nav* представляется списком новостей или списком элементов навигации, я переключился на использование элементов, поскольку они несут больше семантической информации, чем <div> с. На данный момент, div-vs-ol / ul - это вопрос личных предпочтений.

Я также переименовал функции и классы элементов, чтобы отразить их назначение, а не то, как они выполняют эту цель. Таким образом, вы можете изменить их поведение, не требуя изменения имени.

Использовали ли вы <a> для поддержки старых версий IE? Я бы не стал беспокоиться о чем-либо старше IE 6 .

Что касается комментариев «Нет возврата», «Возврата нет», вот несколько ссылок, которые помогут вам начать отладку JS с помощью Firebug . Safari также имеет хороший отладчик, если это ваш браузер.

0 голосов
/ 03 мая 2014

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

Заменить 'navid' в двух местах на navid_array [i]

document.getElementById ( navid_array [i] ). ClassName 

    if(navid == navid_array[i]) 
        {
            document.getElementById(navid_array[i]).className = "navCSS0";
        }
     else 
        {
            document.getElementById(navid_array[i]).className = "navCSS1";
        }
0 голосов
/ 23 декабря 2009

Несколько вещей с вашим кодом:

  1. Ваши теги 'head' должны быть <head> </head>, а не <header> </header>
  2. Ваш тег <script> должен находиться внутри элемента <head>, и лучше всего указывать язык с помощью: <script language="JavaScript" type="text/javascript"> ... </script>
  3. Вызвать ваш код в функции, которая запускается при событии onload тела, чтобы убедиться, что элементы, на которые ссылается ваш javascript, действительно инициализированы на странице
0 голосов
/ 23 декабря 2009

Похоже, проблема в следующем:

Ваш якорный тег (ссылка) окружен div (в этом случае сам div не занимает больше места, чем ссылка внутри него). Когда пользователь щелкает ссылку, он запускает щелчок по ссылке (и передает идентификатор ссылки, который не добавляется в качестве атрибута).

Также вам нужно переместить тег скрипта в заголовок (кстати, его «голова», а не «заголовок»)

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

Нет похожих вопросов

...