Блог

Главная - Вопросы по программированию - Оформление заголовка для заголовков, активируемых Javascript

Оформление заголовка для заголовков, активируемых Javascript

#javascript #html #css #sections

#javascript #HTML #css #разделы

Вопрос:

Итак, для моего веб-сайта я успешно разделил информационные разделы, где содержимое страницы может быть изменено. Единственная проблема в том, что теперь я не могу видеть, содержимое какого заголовка активировано.

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

Первый код Javascript:

 function toggle_visibility(id) {
    var infoBox = document.getElementsByClassName("info");
    for (var i = 0; i < infoBox.length; i  ) {
        infoBox[i].style.display = 'none';
    }
    var e = document.getElementById(id);
    if(e.style.display == 'block') {
        e.style.display = 'none';
    } else {
        e.style.display = 'block';
    }
}

Кто-нибудь может мне помочь? 🙁

Ответ №1:

Jquery :- 

    $(".heading").click(function(){    
        if(!$(this).hasClass("active")){
            $(".heading").removeClass("active");
            $(this).addClass("active");
        }   
    });

Обновите CSS с : 

 .active{
    color:red:
    border-bottom: 2px #7D5B61 solid !important;
}

и HTML с 

 <a class="heading active" onclick="toggle_visibility('info1');">

Js Fiddle Здесь: — http://jsfiddle.net/codenathan/dtZLU/8 /

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

1. это почти именно то, что я хочу. но как мне заставить border-bottom также изменить цвет на 2px #7D5B61 solid? Я пытался экспериментировать с class .active, но, похоже, он работает только с цветом :/

2. Это потому, что в css-разделе .infoWrapper .infoHead .heading переопределен цвет границы, поэтому, если вы включите !important, это гарантирует, что он используется. Я обновил ответ для вас jsfiddle.net/codenathan/dtZLU/15

3. большое вам спасибо! Я застрял на этом надолго: D