2009-07-07 3 views
2

Я использую слайдер coda на моей странице. Посмотреть его здесь:Jquery Div Скрыть по клику

http://www.ndoherty.com/demos/coda-slider/1.1.1/

Каждая вкладка панели, чтобы переместить содержимое внутри нее, когда она нажата. Я хочу что-то ELSE произойдет при нажатии. Когда клика нажата, я хочу, чтобы изображение отображалось в разделе верхнего уровня страницы в div, называемом «#topleft». Для простоты давайте просто сосредоточимся на этом div, но у меня также будут активированы и другие divs на клике.

Я думал об установке #topleft div для отображения: none в CSS и добавлении простой функции jquery, которая устанавливает видимость #topleft в true при нажатии определенного div. Поэтому давайте использовать это для примера: у меня есть div #nav с 5 div внутри (каждый из которых содержит свою собственную навигационную ссылку). Когда щелкают div #nav taba, я хочу, чтобы div #topleft появлялся, и когда щелкнули другую навигационную ссылку (скажем #nav tabb), я хочу, чтобы она исчезла. Может кто-нибудь помочь мне с этим довольно простым кодом jquery? СПАСИБО СООО МНОГО!

ответ

6

Использование show() и hide().

Что-то эффект:

$('#someTabLink').click(function() { 
    $('#someImage').show(); 
}); 

$('#someOtherTabLink').click(function() { 
    $('#someImage').hide(); 
}); 

или с помощью toggle():

$('#someTabLink').click(function() { 
    $('#someImage').toggle(); 
}); 

Используйте дисплей CSS свойство, в отличие от видимости, если вы хотите что-то быть изначально скрыт, когда ваш загружается страница, поскольку jQuery show, hide и toggle методы работают, манипулируя свойством display css.

+3

Переключение http://docs.jquery.com/Effects/toggle может делать то, что вам нужно, слишком. – ajm

+0

@ajm - спасибо, добавили его в ответ. – karim79

0

Не могли бы вы использовать что-то вроде этого в JQuery:

$("element").addClass("ClassName") 
    $("element").removeClass("ClassName") 

Чтобы удалить класс, который скрывает его и добавить класс, который reveales его?

0

Чтобы добавить предложение karim79, вы можете сделать несколько вкладок ссылки скрыть #topleft DIV так:

$('#tabb, #tabc, #tabd').click(function() { 
    $('#topleft').hide(); 
});