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、セクション内の1つを表示しようとしています: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()

注: これにより、「Div」で終了する ID を持つすべての div が選択されます。あなたはこれについてもっと正確にしたいかもしれません

于 2013-03-21T08:33:30.310 に答える
0

First of all I suggest you rename your listJobsDiv to listJobDiv, then name your last link to deletejob:

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

Then you can do something like this:

 $(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

display プロパティが still であるため、他の div も表示されていますblock。他のdivのcssをに設定する必要がありますdisplay:none

于 2013-03-21T08:33:08.220 に答える
0

以前の div を再度非表示にする必要があります。

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

代わりに .show() と hide() を使用できます。

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

この実例を見て​​みましょう: http://jsfiddle.net/bmems/

于 2013-03-21T08:34:27.287 に答える