繃顯示/隱藏錨定的div

我服務的各自的描述，我已經鏈接到與錨鏈接列表。直到我點擊服務名稱時，服務的詳細信息纔會隱藏。我無法隱藏之前點擊過的服務，它們是重疊的。繃顯示/隱藏錨定的div

這是什麼，我已經能夠到目前爲止放在一起的jsfiddle：

$('#home-header .service-box li a').click(function() { 
    $($(this).attr('href')).css('display', 'block'); 
}); 

/* 

$("#home-header .service-box li a").click(function(){ 
    var $name = $(this).text(); 
    var $activebox = ($("#" + $name).length === 0) ; 


    $("#home-header .service-details").not($activebox).hide(); 
    $("#home-header .service-details").not($activebox).removeClass('active'); 

    $activebox.toggle(); 
    $activebox.toggleClass('active'); 

}); 

*/

（註釋掉的代碼不能正常工作，但它的接近我什麼試圖實現）。

謝謝大家幫助我！

Cintia

來源

2015-09-29 user2348598

看你的情況是重疊的，因爲你永遠不會關閉/隱藏它們。因此，JavaScript/JQuery一行一行地運行。我們將首先關閉/隱藏所有的$('.service-details').hide(); onclick，然後打開/顯示當前的一個。

JQuery的

$('#home-header .service-box li a').click(function() { 
    $('.service-details').hide(); 
    $($(this).attr('href')).css('display', 'block'); 
});

UPDATE：

Fiddle : Demo

注：在這裏，在演示中，我使用fadeIn()所以它有一定的平滑作用。還使用其他任何東西，如toggle()是無用的。由於您在展示之前隱藏了所有service-details，所以不需要toggle()。

來源

2015-09-29 19:15:40 divy3993

我會divy3993的答案達成一致，但略有改進：

$('#home-header .service-box li a').click(function() { 
    $('.service-details').hide(); 
    $($(this).attr('href')).toggle(); 
});

撥動就是在這種情況下，更有效的作用。

你可以看到在這個小提琴的例子：https://jsfiddle.net/rockmandew/rdhn60mb/6/

來源

2015-09-29 19:34:36 rockmandew

謝謝你們！它正在接近。我也希望能夠點擊相同的鏈接並切換，以便關閉它。理想情況下，我也希望能夠點擊鏈接之外（頁面上的任何位置）並關閉它。這與我把附加功能的新小提琴的https：//的jsfiddle。net/dwxn7pfk/ 不起作用的是，當您點擊相同的鏈接兩次（切換打開/關閉）時，活動類和打開/關閉切換不起作用。 – user2348598

再次關閉DIV如果點擊相同的鏈接像你想..簡單的包裝在一個if statment檢查，如果當前的活動選項卡具有相同的id作爲href值。如果是這樣的不運行show

//if the clicked a element's href is not the same as the active elements id 
if($(this).attr('href') != "#"+$(".active").attr("id")) { 

    //remove the current active class 
    $('.service-details').removeClass("active"); 

    //fade in the div 
    $($(this).attr('href')).fadeIn(); 

    //add the class active to the div 
    $($(this).attr('href')).addClass("active"); 
}

這裏是與編輯一的jsfiddle，我也加入了淡出，使其少跳動

https://jsfiddle.net/rdhn60mb/21/

來源

2016-05-31 19:34:55 user3683675

繃顯示/隱藏錨定的div

回答

相關問題