Question

<ul class="dropdown-menu">
    <li><a href="#listjobsDiv" id="listJob">listJobs</a></li>
    <li><a href="#newJobDiv" id="newJOB">Add new Job</a></li>
    <li><a href="#editJobDiv" id="editJOB">Edit Job</a></li>
    <li><a href="#deleteJobDiv">Delete Job</a></li>
</ul>

<div id="adminBody">
    <div id="listjobsDiv" style="display:none">List Jobs Here</div>
    <div id="newJobDiv" style="display:none">New Job Here</div>
    <div id="editJobDiv" style="display:none">Edit Job Here</div>
    <div id="deleteJobDiv" style="display:none">Delete Job Here</div>
</div>

当我点击使用jQuery的相应链接时，我试图在div部分中显示其中一个adminBody：

$(document).ready(function() {  
    $("#newJOB").click(function() { 
        alert('newJob'); 
        $("#newJobDiv").css('display', 'block'); 
    });  
});

$(document).ready(function() {  
    $("#editJOB").click(function() { 
        alert('hi'); 
        $("#editJobDiv").css('display', 'block');   
    });  
});

但问题是当我点击链接时，之前的div也显示在adminBody div中。

Answer 1

你应该先隐藏它们，然后只显示有趣的一个。

像$("div[id$='Div']").hide()

这样的东西

注意：这将选择ID为'Div'的所有div。您可能希望更精确地使用此

Answer 2

其他div也会显示，因为它们的显示属性仍为block。您需要将另一个div的css设置为display:none

Answer 3

你必须再次隐藏前面的div。

$("#adminBody div").hide();

你可以改为.show（）和hide（）。

 $("#newJobDiv").show();

看看这个工作示例：http://jsfiddle.net/bmems/

Answer 4

试试这个：

$(document).ready(function() {  
  $(".dropdown-menu a").click(function (e) {
     e.preventDefault();
     $div = $(this).attr('href');
     $('#adminBody').children().hide();
     $('#adminBody').find($div).show();
  });  
});

Tryout fiddle

Answer 5

首先，我建议您将listJobsDiv重命名为listJobDiv，然后将您的上一个链接命名为deletejob：

<li><a href="#deleteJobDiv" id="deleteJob">Delete Job</a></li>

然后你可以这样做：

 $(document).ready(function () {
        var adminBody = $("#adminBody");
        $(".dropdown-menu a").click(function () {
            adminBody.find('div').hide();
            var id = this.id;
            $("#" + id + "Div").show();
        });
    });

使用anchors标签显示多个div

5 个答案:

Tryout fiddle