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>

的Javascript

$(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 toggle来实现您的目标。 e.g。

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

您应该做的另一项改进是，不是在每个href中对id进行硬编码，只需向元素添加一个类，覆盖元素的onclick并切换相关内容。要获取相关内容，您可以使用命名法，例如：如果您使用id='myid'作为锚点，请使用id="myid_content"作为内容，因此在点击功能中您可以切换内容，例如。

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()
}

Here is a working sample on 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()
})

See it in action here

JS显示/隐藏切换

3 个答案: