2011-07-01 17 views
0
#bottomToolbar #facet-container #tb-facets .info-toolbar #rv-active { 
position:relative; 
} 

.tb-1-5 { 
display:none; 
} 


<div id="bottomToolbar"> 
    <div id="facet-container"> 
<ul id="tb-facets"> 
    <li class="info-toolbar"> 
    <a id="info-tb-1">Recently Viewed</a> 
    <div id="rv-active" class="tb-1-5">Hello World</div></li> 
    <li class="info-toolbar">Favorites</li> 
    <li class="info-toolbar">Wish List</li> 
</ul> 
</div> 
    </div> 


$('#info-tb-1').bind('click', function() { 
     $('#rv-active').removeClass('tb-1-5'); 
    }); 

Что я пытаюсь сделать, это показать div, когда я нажимаю элемент «a». Мне нужно изменить его, чтобы удалить дисплей: none;JQuery Добавить/удалить Класс отдельного div по клику

Благодаря

+0

Я не очень ясно, что ваш вопрос ... код, который вы должны удалить класс 'ТБ-1-5' из элемента с 'ид =» rv-active "(и, следовательно, делает его видимым). –

+0

Я пытаюсь сделать элемент с id = "rv-active" видимым, но этот скрипт не работает, как вы думаете, его проблема с CSS? –

+0

Это прекрасно работает для меня ... см. Эту скрипку (нажмите «Недавно просмотренные» и появится «div», содержащий «Hello World»): http://jsfiddle.net/BB7pS/32/ (хотя, как отметили другие , использование 'show()' было бы проще). –

ответ

2

Вы пробовали использовать .show()?

$('#info-tb-1').click(function() 
{ 
    $('#rv-active').show(); 
}); 

Научитесь прорыть jQuery API docs. Они ответят на 99% ваших вопросов.

+0

+1 для связи с документами.Я понял, что большинство людей задают вопросы, потому что они не знакомы с документацией по инфраструктуре, и большинство ответов на SO * показывают *, как что-то делать, а не * учить *, как это сделать. –

2

Если вы хотите отобразить что-нибудь, используйте show();

$('#info-tb-1').bind('click', function() { 
     $('#rv-active').removeClass('tb-1-5').show(); 
    }); 

если что-то скрывается с дисплеем: нет, с помощью шоу() отобразить скрытый элемент

1

Вы можете использовать $(elem).hide() и $(elem).show(), чтобы добавить/удалить «дисплей: нет;»

Существует также функция .toggle() с примером того, что вы пытаетесь сделать: http://api.jquery.com/toggle/

1

Вы могли бы использоваться document.getElementById('rv-active').style.display="block"; или $('#rv-active').css("display","block"); и вместо стилизованной #rv-active напрямую, а не со всеми этими другими дивы, как это:

#bottomToolbar #facet-container #tb-facets .info-toolbar { 
    position:relative; 
} 

#rv-active { 
    position:relative; 
    display:none; 
} 

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

Подробнее о getElementById here, а также о методе .css() here.

1

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

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

Попробуйте вместо этого:

$(document).ready(function() { 
    $('#info-tb-1').bind('click', function() { 
     $('#rv-active').show(); 
    }); 
}); 
Смежные вопросы