jQuery根據點擊的鏈接切換/更改內容

我正在開發一個網站，該網站有一個菜單。在菜單中我有兩個甚至三個鏈接。鏈接將在菜單旁邊打開一個帶有滑動效果的div。（菜單是一個右列，div將向左打開）。jQuery根據點擊的鏈接切換/更改內容

假設我點擊鏈接（A）。鏈接（A）用一些文字打開div。當我再次點擊鏈接（A）時，div將消失。所以，鏈接（B）的邏輯是相同的，但它會顯示一個畫廊。這不是重要的部分。

我希望能夠切換div內的信息。如果我點擊鏈接（B），而div仍然打開鏈接（A）的信息，我只希望div切換內容，而不是關閉並重新打開。

基本上 - 如果我點擊打開div的相同鏈接，它會消失。但是如果我點擊其他鏈接，內容應該改變。

有什麼建議嗎？

這裏的DIV：

<div class="col-md-2" id="openInfo"> 
    <div id="info"> <p>INFO</p></div> 

    <div id="images"> 
     <p>IMAGES</p> 
    </div> 

</div>

鏈接：

<a href="#openInfo" id="treatInfo">TREATMENT INFO</a> 

    <a href="#openInfo" id="gallery" >GALLERY</a>

腳本：

$("#gallery").click(function() { 
    $("#openInfo").toggleClass("open"); 
    $("#images").css("display", "block"); 
    $("#info").css("display", "none"); 
}); 


$("#treatInfo").click(function() { 
    $("#openInfo").toggleClass("open"); 
    $("#info").css("display", "block"); 
    $("#images").css("display", "none"); 
});

來源

2017-07-14 MissAndersson

你可以添加一個檢查時，切換open類，這意味着當該條件不成立.open類將不會被切換（並保持爲是）：

$("#gallery").click(function() { 
    if (!$("#openInfo").is(".open") || $("#images").is(":visible")) { 
     $("#openInfo").toggleClass("open"); 
    } 
    $("#images").css("display", "block"); 
    $("#info").css("display", "none"); 
}); 


$("#treatInfo").click(function() { 
    if (!$("#openInfo").is(".open") || $("#info").is(":visible")) { 
     $("#openInfo").toggleClass("open"); 
    } 
    $("#info").css("display", "block"); 
    $("#images").css("display", "none"); 
});

來源

2017-07-14 22:28:52 trincot

謝謝！這是我一直在尋找的。 :) – MissAndersson

您可以創建一個在您DIV附加屬性知道你是否應該更換的內容或關閉。例如，「數據內容」

<div id="myDiv" data-content="images"> 
    <p>IMAGES</p> 
</div>

使用jQuery你可以使用來獲取該屬性：

$('#myDiv').attr('data-content');

您也可以使用設置值：

$('#myDiv').attr('data-content','images'); 
$('#myDiv').attr('data-content','info');

這樣一來，你就可以知道如果您應該更換內容或關閉div：

$("#treatInfo").click(function() { 
    if($('#myDiv').attr('data-content') == 'info'){ 
     // close div 
    }else{ 
     $('#myDiv').attr('data-content','info'); 
     // load info content 
    } 
});

來源

2017-07-14 22:34:23

jQuery根據點擊的鏈接切換/更改內容

回答

相關問題