Действия с DIV2 и DIV1 при onclick на DIV1
есть DIV1 - кнопка и DIV2 - блок, который надо показывать/скрывать + надо менять классы vk_comments_inactive, vk_comments_active для смены изображения кнопки
черновой код DIV1 onclick следующий:
<div id="vk_chat_button" class="vk_comments_inactive" onclick="toggle_visibility('vk_comments_wrap');$(this).removeClass('vk_comments_inactive').addClass('vk_comments_active');" >chat</div>
работающая функция, которая прячет/показывает DIV2, здесь все в порядке:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
помогите в этот код правильно прописать смену классов vk_comments_inactive, vk_comments_active по toggle для DIV1, опять к ночь, опять начинаю тупить, не хватает примеров и ничего не получается. |
нашел пример для второй части, со сменой классов
http://jsfiddle.net/toddmotto/6UwF3/ получилось так
<div id="vk_chat_button" class="vk_comments_inactive" onclick="toggle_visibility('vk_comments_wrap'); $(this).toggleClass(this, 'vk_comments_active');" ></div>
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
function toggleClass(elem, className) {
var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, " " ) + ' ';
if (hasClass(elem, className)) {
while (newClass.indexOf(" " + className + " ") >= 0 ) {
newClass = newClass.replace( " " + className + " " , " " );
}
elem.className = newClass.replace(/^\s+|\s+$/g, '');
} else {
elem.className += ' ' + className;
}
}
но, все равно не работает, постоянно меняет на неактивный класс. помогите победить этот код. |
$(this) - это jQuery, .toggleClass() - ее метод изменяющий класс/классы, и синтаксис его такой.
Вы же по методу пытаетесь вызвать функцию, которая совсем не нужна. Подключили jQuery, значит используйте, выбросив и вот это onclick="toggle_visibility('vk_comments_wrap');. |
нет, jquery не получится использовать, он подключается позже.
потому все функции и сделаны в javascript. с jquery все было бы проще для меня. пробовал onclick="toggle_visibility('vk_comments_wrap'); toggleClass(this, 'vk_comments_active');" так тоже не работает. |
laimas, спасибо, натолкнули на решение.
onclick="toggle_visibility('vk_comments_wrap'); toggleClass(this);"
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
function toggleClass(div){
var className=div.getAttribute("class")
if(className=="vk_comments_active"){
div.className="vk_comments_inactive"
}
else{
div.className="vk_comments_active"
}
}
вот так вроде получилось |
| Часовой пояс GMT +3, время: 07:01. |