JS顯示/隱藏切換

Question

希望很快。 我已經對此進行了編碼：

<script>
$("div.design-project").css('display', 'none');
function InsertContent(tid) {
if(document.getElementById(tid).style.display == "none") {
    document.getElementById(tid).style.display = "block";
    }
else {
    document.getElementById(tid).style.display = "none";
    }
}
</script>

如果鏈接具有href：

href="javascript:InsertContent('design-project-1');"

它在下面顯示該div。 如果再次單擊它，它就會消失。 然后，如果您單擊另一個具有href的鏈接：

href="javascript:InsertContent('design-project-2');"

它會顯示該div等。

但是，如果您打開了一個div，然后單擊另一個錨鏈接以打開另一個div，則它不會關閉已經打開的div。

有任何想法嗎？ 另外，如果有更好的方法可以做到這一點，請告訴我。

謝謝，R

這是請求的HTML：

<a class="design-projects-slides-title" href="javascript:insertDesignProjectContent('design-project-1');">Title of project</a>

<!-- start of .design-project --><div class="design-project" id="design-project-1">
                <div class="grid_6"><div class="project-info-area">
                    <h2>Title of project</h2>
                        <p>A rural retreat in the city. Built almost entirely from reclaimed element this little new-build timber cabin provides guest accommodation.<p>
                        <p>By coincidence a former chapel partition was found that matched the dimensions required. Used in their original painted condition, these doors became the front elevation and concertina open to one side - perfect for warm summer days. Further reclaimed elements include a bespoke curtain made from found patchwork, Victorian conservatory grills fitted over modern french heaters and industrial lights, taps, wash basin and an exposed shower fitting. Salvaged hardwood strip flooring and our Heathrow Terminal 2 stone fold from the floor to the walls. A thorough use of salvage all round!</p>
                </div></div>
                <div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
                <div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
                <div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
                <div class="grid_12 project-info-images"><img src="http://placehold.it/940x540"></div>
                <div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
                <div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
                </div><!-- end of .design-project -->

更新

最后，我結合了您的答案-謝謝！

<!-- Reveal/hide sections on design projects/joinery -->
<script>
/* This is for the 'choose a project' reveal/hide */
$("div.slider-content").css('display', 'block');
$(".design-projects-slides-title").click(function() {
    $(".slider-content").hide();
});
/* This is for reveal/hide on the product content */
$(".design-project").hide()
$('.design-projects-slides-title').click(function(){
    var id = $(this).attr('id')
    var content_id = id+"-content"
    $('#'+content_id).slideDown('slow')
});
$(".slider-trigger").click(function() {
    $(".design-project").hide();
});
</script>

Answer 1

首先，我看到您使用了jQuery，所以為什么不使用它來實現整個流程呢？

您可以執行以下操作：

$(".mydivclass").click(function(){
   $(".mydivclass").hide();
   $(this).show();
})

Answer 2

的HTML

<a id="id1" href="#" rel="divContent1" >First</a><br/>
<a id="id2" href="#" rel="divContent2">Second</a><br/>


<div id="divContent1" class="content">
    Content of Div 1
</div>
<div id="divContent2" class="content">
    Content of Div2
</div>​

Java腳本

$(function(){
   $(".content").hide();
    $("a").click(function(e){
      e.preventDefault()
      var divToShowId=$(this).attr("rel");

       $(".content").hide();
       $("#"+divToShowId).show();   

    });     

})​

我將Content div的id用作鏈接的rel屬性值，因為我們需要某種方式將鏈接與其內容連接起來。

這是工作示例： http : //jsfiddle.net/Kx9Ma/5/

Answer 3

使用jQuery 切換可實現您要執行的操作。 例如

function InsertContent(tid) {
    $('#'+tid).toggle()
}

您應該做的另一項改進是，不必對每個href中的id進行硬編碼，只需將一個類添加到元素，覆蓋元素的onclick並切換相關內容。 要獲得相關內容，您可以使用命名法，例如，如果您使用id='myid'作為錨，請使用id="myid_content"作為內容，因此在click功能中您可以切換內容，例如

HTML：

<a class="content-link" id="myid">click me</a>
<div id="myid_content">
Here is the content
</div>

JavaScript：

$('.content-link').click(function(){
    var id = $(this).attr('id')
    var content_id = id+"_content"
    $('#'+content_id).toggle()
}

這是jsFiddle上的工作示例

更好的方法是將可點擊的鏈接和內容保留在div中，這樣就無需設置id ，只需設置一些類，並通過父子關系即可獲取內容，例如

的HTML

<div class="content-wrap">
<a class="content-link" >Click Me</a><br/>
<div class="content">
Here is the content for click me
</div>
</div>

JavaScript：

$('.content-link').click(function(){
    var id = $(this).parent().find(".content).toggle()
})​

在這里看到它的作用