0 
<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 也显示在adminBodydiv 中。

4

5 回答 5

1

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

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

注意：这将选择 ID 以“Div”结尾的所有 div。您可能希望对此更准确

于 2013-03-21T08:33:30.310 回答
0

您必须再次隐藏以前的 div。

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

你可以 .show() 和 hide() 代替。

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

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

于 2013-03-21T08:34:27.287 回答
0

首先，我建议您将您的重命名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();
        });
    });
于 2013-03-21T08:38:23.770 回答
0

试试这个：

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

试用小提琴

于 2013-03-21T08:36:08.530 回答
0

其他 div 也在显示，因为它们的 display 属性仍然是block. 您需要将其他 div 的 css 设置为display:none

于 2013-03-21T08:33:08.220 回答