показать/скрыть один DIV за раз, изменив стиль ссылки

Это время, я пытаюсь найти что-то, что мне нужно, и проверил множество ссылок @stackoverflow, @google & и т. Д., Но каждый раз какая-то вещь не работает 100%показать/скрыть один DIV за раз, изменив стиль ссылки

Так что проблема заключается в создании/скрытии DIV, где только один будет открыт сразу + может быть закрыт при нажатии той же ссылки, активная ссылка DIV должна изменить его стиль.

Один из самых знает это:http://dimdajdeneg.com/temp/menu.html , но это не меняется «шоу» DIV стиль ссылка & вы не можете закрыть все DIV, как и если первый открыт, нажав на него снова не закроется открыл один.

Это один также интересно:http://dimdajdeneg.com/temp/menu2.html даже закрывает это сам, но «показать DIV» стиль ссылки не может быть изменено

Я знаю, что это просто, но, вероятно, это просто сог понедельника :) Кто-нибудь может мне помочь?

Спасибо заранее!

источник

2013-02-18 JU1CY

Опубликовать фактический код и показать нам, что у вас есть до сих пор? – adeneo

[Что вы пробовали?] (Http://whathaveyoutried.com/) – Khez

любезно проверьте две ссылки (http://dimdajdeneg.com/temp/menu.html) & (http://dimdajdeneg.com/temp/ menu2.html) извините, имея некоторую проблему с temp с jsfiddle – JU1CY

Вот что я придумал, это исчезает все, кроме одного щелкнули (внутри .not()), который получает переключаемых вместо этого.

HTML:

<a href="" data-id="d1">Link 1</a> 
<a href="" data-id="d2">Link 1</a> 
<a href="" data-id="d3">Link 1</a> 
<div id="d1">Div 1</div> 
<div id="d2">Div 2</div> 
<div id="d3">Div 3</div>

CSS:

a { 
    background:blue; 
    color:red; 
} 
.active { 
    background:green; 
    color:white; 
} 
div{ 
    display:none; 
}

JQuery:

$('a').click(function(ev){ 
    ev.preventDefault(); 
    var id = $(this).data('id'); 
    $('a').not($(this).toggleClass('active')).removeClass('active'); 

    // parallel fading:  
    $('div').not($('#'+id).fadeToggle(500)).fadeOut(500); 
    // OR 
    // sequential fading: 
    $.when($('div').not($('#'+id)).fadeOut(500)).done(function(){ 
     $('#'+id).fadeToggle(500) 
    }); 
});

jsFiddle:

http://jsfiddle.net/fKGc5/

источник

2013-02-18 17:50:44 Andy

Спасибо, что я нахожусь на 99%, что мне нужно, любой шанс заставить его работать так, сначала он исчезает, а другой DIV fadesout? Coz работает, когда вы выберете другой DIV, который будет показан, вы увидите оба fos секунду? – JU1CY

@AleksandrSubots уверен, я добавил блок последовательного замирания, но это немного другой метод. – Andy

Работы gr8, просто последнее желание, любой шанс изменить Тег DIV с li nk внутри + добавление класса по умолчанию для него, вид неактивного, поэтому, щелкнув по нему, он получит новый класс, закрыв его, он вернется к умолчанию? – JU1CY

Я попытался кодирования в ссылке: http://dimdajdeneg.com/temp/menu.html

и модифицирована, что код, как показано ниже ...

function m_slide(m_inactive) {$('.m_box').each(function(index) { 
    if ($(this).attr("id") == m_inactive) { 
      $(this).toggle("fast"); 
     } 
    else { 
      $(this).slideUp(300); 
    } 
});}

г. Несмотря на слайд вниз i have used тумблер() `;

Попробуйте эту скрипку: http://jsfiddle.net/RYh7U/92/

источник

2013-02-18 17:42:24 Pandian

Спасибо! Но все те же проблемы: вы можете открыть более одного DIV + активных ссылок не изменчивым ... :( – JU1CY

@AleksandrSubots: Я обновил свой код, попробую скрипку Теперь ... http://jsfiddle.net/RYh7U/ 92/ – Pandian

yeap, но все еще активная ссылка «show DIV» stile не подлежит изменению, когда активен :( – JU1CY

Если я правильно понял ваш вопрос ..

Добавьте это в .click() события:

$('#linkwrapper > a').each(function() { 

$(this).removeClass("isActive"); 

}); 

$(this).addClass("isActive");

Очевидно, что вы будете нуждаться в CSS для isActive класса!

источник

2013-02-18 17:50:55 Zac

показать/скрыть один DIV за раз, изменив стиль ссылки

ответ

Смежные вопросы