jquery - 添加div后图像不断向下移动-6ren

jquery - 添加div后图像不断向下移动

转载作者：行者123 更新时间：2023-11-28 06:56:01

我为 jpg 图像创建了一个 imageMap，每次单击图像的圆形区域时，我都会在图像上添加一个 div。

每次我点击该区域时，图像都会向下移动，结果影响了 div 的位置。我究竟做错了什么？

这是我的代码:

 <html>
 <head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="papaya.css">
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <script src="papaya.js"></script>
 <style>
.jumbotron {
                padding: 0.5em 0.6em;
                h1 {
                    font-size: 2em;
                }
                p {
                    font-size: 1.2em;
                    .btn {
                        padding: 0.5em;
                    }
                }
            }

#lymphNode img {
            display:block;
                margin-left: auto;
                margin-right: auto;
            }

            .menuItem {
                background-color: #e0e0ff;
                width:299px;
                height:137px;
                border:2px solid #000;
            }

            .fontSize {
                padding-top:50px;
                color: #00000;
                font-family: Georgia, Times, serif; 
                font-size: 200%; 
                text-align: center;
            }
            .menuItem:hover { -moz-box-shadow: 0 0 50px #ccc; 
                              -webkit-box-shadow: 0 0 50px #ccc; box-shadow: 0 0 50px #ccc; 
            } 

            .smallViewer {
                margin-left:75px;width:700px;height:420px;
            }
</style>
<script>
            $(document).ready(function ()
            {
                $(".links").click(function ()
                {
                    $visible = $("divs:visible");
                    $(".divs:visible").hide();
                    $("#" + $(this).attr("data-showdiv")).show();
                });

                $("map#imageMap").click(function (event) {
                    var target = $(event.target);
                    var targetId = target.attr('id');
                    var matches = targetId.match(/\d+/)[0];
                    $("#div" + matches).show();
                });
                $("img").click(function(event){
                   alert(event.pageX+ ' , ' + event.pageY); 
                });

            });
        </script>
 </head>
 <body>
  <div class="container">
 <div class="jumbotron">
                <h2 style="text-align:center;">Head And Neck Therapy </h2>
            </div>

 <div style="width:1140px; height:550px;border:2px solid #000;">
    <div style="float: left">
                    <div style="width:300px; height: 550px;display: inline-block;"> 
                        <a href="#" class="links" data-showdiv="viewer"> <div class="menuItem fontSize">  </div> </a>
                        <a href="#" class="links" data-showdiv="lymphNode"> <div class="menuItem fontSize">  </div> </a>
                        <a href="#" class="links" data-showdiv="userForm"> <div class="menuItem fontSize">  </div> </a>
                        <a href="#" class="links" data-showdiv="confirmation"> <div class="menuItem fontSize"> </div> </a>
                    </div>
    </div>

    <div id="parentDiv" style="width:832px; height: 548px;display: inline-block;"> 
        <div id="div1" title="node1" style="width:13px;height:13px;position:relative;top:190;left:485;background-color:#ff4c4c;opacity:0.5;display:none"></div>
        <div id="div2" title="node2" style="width:13px;height:15px;position:relative;top:193;left:507;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div3" title="node3" style="width:15px;height:17px;position:relative;top:223;left:417;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div4" title="node4" style="width:15px;height:17px;position:relative;top:227;left:400;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div5" title="node5" style="width:12px;height:15px;position:relative;top:258;left:412;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div6" title="node6" style="width:12px;height:13px;position:relative;top:260;left:355;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div7" title="node7" style="width:13px;height:12px;position:relative;top:273;left:331;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div8" title="node8" style="width:13px;height:12px;position:relative;top:258;left:338;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div10" title="node10" style="width:13px;height:12px;position:relative;top:240;left:498;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div11" title="node11" style="width:13px;height:12px;position:relative;top:254;left:496;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div12" title="node12" style="width:13px;height:12px;position:relative;top:250;left:505;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div13" title="node13" style="width:10px;height:12px;position:relative;top:267;left:505;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div14" title="node14" style="width:12px;height:12px;position:relative;top:280;left:499;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div15" title="node15" style="width:16px;height:12px;position:relative;top:325;left:512;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div16" title="node16" style="width:13px;height:12px;position:relative;top:310;left:537;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div17" title="node17" style="width:13px;height:12px;position:relative;top:304;left:493;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div18" title="node18" style="width:11px;height:12px;position:relative;top:301;left:479;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div19" title="node19" style="width:13px;height:12px;position:relative;top:319;left:478;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div20" title="node20" style="width:13px;height:12px;position:relative;top:315;left:465;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div21" title="node21" style="width:13px;height:12px;position:relative;top:300;left:458;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div22" title="node22"style="width:13px;height:12px;position:relative;top:345;left:438;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div23" title="node23" style="width:13px;height:12px;position:relative;top:322;left:428;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div24" title="node24" style="width:11px;height:20px;position:relative;top:313;left:422;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div25" title="node25" style="width:13px;height:17px;position:relative;top:302;left:412;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div26" title="node26" style="width:13px;height:15px;position:relative;top:305;left:395;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div27" title="node27" style="width:13px;height:12px;position:relative;top:330;left:390;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div28" title="node28" style="width:13px;height:17px;position:relative;top:460;left:385;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div29" title="node29" style="width:13px;height:15px;position:relative;top:468;left:370;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div30" title="node30" style="width:13px;height:17px;position:relative;top:485;left:387;background-color:#ff4c4c;opacity:0.5;display:none;"></div>

        <div id="lymphNode" class="divs" style="display:none;width:830px; height:548px;"> 
        <img src="image.jpg" width="500" height="500" alt="Planets" usemap="#imageMap">

        <map id="imageMap" name="imageMap">
            <area shape="circle" coords="325,185,10" href="#" alt="Buccal Node1" title="Buccal Node1" id="node1"/>
            <area shape="circle" coords="345,185,8" href="#" alt="Buccal Node2" title="Buccal Node2" id="node2"/>
            <area shape="circle" coords="256,214,8" href="#" alt="Buccal Node3" title="Buccal Node3" id="node3"/>
            <area shape="circle" coords="239,216,8" href="#" alt="Buccal Node4" title="Buccal Node4" id="node4"/>
            <area shape="circle" coords="251,248,8" href="#" alt="Buccal Node5" title="Buccal Node5" id="node5"/>
            <area shape="circle" coords="192,250,8" href="#" alt="Buccal Node6" title="Buccal Node6" id="node6"/>
            <area shape="circle" coords="170,266,8" href="#" alt="Buccal Node7" title="Buccal Node7" id="node7"/>
            <area shape="circle" coords="177,248,8" href="#" alt="Buccal Node8" title="Buccal Node8" id="node8"/>
            <area shape="circle" coords="336,233,8" href="#" alt="Buccal Node10" title="Buccal Node10" id="node10"/>
            <area shape="circle" coords="336,246,5" href="#" alt="Buccal Node11" title="Buccal Node11" id="node11"/>
            <area shape="circle" coords="344,241,5" href="#" alt="Buccal Node11" title="Buccal Node12" id="node12"/>
            <area shape="circle" coords="342,260,5" href="#" alt="Buccal Node11" title="Buccal Node13" id="node13"/>
            <area shape="circle" coords="337,272,5" href="#" alt="Buccal Node11" title="Buccal Node14" id="node14"/>
            <area shape="circle" coords="353,316,10" href="#" alt="Buccal Node11" title="Buccal Node15" id="node15"/>
            <area shape="circle" coords="376,303,8" href="#" alt="Buccal Node11" title="Buccal Node16" id="node16"/>
            <area shape="circle" coords="332,295,8" href="#" alt="Buccal Node11" title="Buccal Node17" id="node17"/>
            <area shape="circle" coords="316,293,5" href="#" alt="Buccal Node11" title="Buccal Node18" id="node18"/>
            <area shape="circle" coords="317,313,5" href="#" alt="Buccal Node11" title="Buccal Node19" id="node19"/>
            <area shape="circle" coords="304,305,5" href="#" alt="Buccal Node11" title="Buccal Node20" id="node20"/>
            <area shape="circle" coords="297,293,5" href="#" alt="Buccal Node11" title="Buccal Node21" id="node21"/>
            <area shape="circle" coords="275,337,5" href="#" alt="Buccal Node11" title="Buccal Node22" id="node22"/>
            <area shape="circle" coords="268,314,8" href="#" alt="Buccal Node11" title="Buccal Node23" id="node23"/>
            <area shape="circle" coords="260,300,10" href="#" alt="Buccal Node11" title="Buccal Node24" id="node24"/>
            <area shape="circle" coords="251,291,8" href="#" alt="Buccal Node11" title="Buccal Node25" id="node25"/>
            <area shape="circle" coords="234,296,5" href="#" alt="Buccal Node11" title="Buccal Node26" id="node26"/>
            <area shape="circle" coords="229,323,5" href="#" alt="Buccal Node11" title="Buccal Node27" id="node27"/>
            <area shape="circle" coords="224,451,5" href="#" alt="Buccal Node11" title="Buccal Node28" id="node28"/>
            <area shape="circle" coords="209,457,5" href="#" alt="Buccal Node11" title="Buccal Node29" id="node29"/>
            <area shape="circle" coords="228,474,8" href="#" alt="Buccal Node11" title="Buccal Node30" id="node30"/>
        </map>



        </img>
  </div>
  </div>
  </div>
</body>
<script>

</script>
</html>

最佳答案

将 parentDiv 更改为相对位置，将子 div 更改为相对位置。

这是代码

 <html>
 <head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="papaya.css">
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <script src="papaya.js"></script>
 <style>
.jumbotron {
                padding: 0.5em 0.6em;
                h1 {
                    font-size: 2em;
                }
                p {
                    font-size: 1.2em;
                    .btn {
                        padding: 0.5em;
                    }
                }
            }

#lymphNode img {
            display:block;
                margin-left: auto;
                margin-right: auto;
                position:auto;
            }

            .menuItem {
                background-color: #e0e0ff;
                width:299px;
                height:137px;
                border:2px solid #000;
            }

            .fontSize {
                padding-top:50px;
                color: #00000;
                font-family: Georgia, Times, serif; 
                font-size: 200%; 
                text-align: center;
            }
            .menuItem:hover { -moz-box-shadow: 0 0 50px #ccc; 
                              -webkit-box-shadow: 0 0 50px #ccc; box-shadow: 0 0 50px #ccc; 
            } 

            .smallViewer {
                margin-left:75px;width:700px;height:420px;
            }
</style>
<script>
            $(document).ready(function ()
            {
                $(".links").click(function ()
                {
                    $visible = $("divs:visible");
                    $(".divs:visible").hide();
                    $("#" + $(this).attr("data-showdiv")).show();
                });

                $("map#imageMap").click(function (event) {
                    var target = $(event.target);
                    var targetId = target.attr('id');
                    var matches = targetId.match(/\d+/)[0];
                    if($("#div"+matches).css('display') != 'none')
                    {
                        $("#div" + matches).hide();
                    }
                    else {
                    $("#div" + matches).show();
                    }
                });

                $("#parentDiv div").click(function (event) {
                    var clicked = event.target;
                    var currentID = clicked.id || "No ID!";
                    alert(currentID);
                });

            });
        </script>
 </head>
 <body>
  <div class="container">
 <div class="jumbotron">
                <h2 style="text-align:center;">Head And Neck Therapy </h2>
            </div>

 <div style="width:1140px; height:550px;border:2px solid #000;">
    <div style="float: left">
                    <div style="width:300px; height: 550px;display: inline-block;"> 
                        <a href="#" class="links" data-showdiv="viewer"> <div class="menuItem fontSize"> Scan Images  </div> </a>
                        <a href="#" class="links" data-showdiv="lymphNode"> <div class="menuItem fontSize"> Select Affected Region </div> </a>
                        <a href="#" class="links" data-showdiv="userForm"> <div class="menuItem fontSize">  Patient Details</div> </a>
                        <a href="#" class="links" data-showdiv="confirmation"> <div class="menuItem fontSize"> Confirmation </div> </a>
                    </div>
    </div>

    <div id="parentDiv" style="width:832px; height: 548px;display: inline-block;position:relative;"> 

        <div id="div1" class="divs" title="node1" style="width:13px;height:13px;position:absolute;top:177;left:484;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div2" class="divs" title="node2" style="width:13px;height:15px;position:absolute;top:177;left:505;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div3" class="divs" title="node3" style="width:15px;height:17px;position:absolute;top:208;left:415;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div4" class="divs" title="node4" style="width:15px;height:17px;position:absolute;top:211;left:398;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div5" class="divs" title="node5" style="width:12px;height:15px;position:absolute;top:242;left:412;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div6" class="divs" title="node6" style="width:12px;height:13px;position:absolute;top:247;left:354;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div7" class="divs" title="node7" style="width:13px;height:12px;position:absolute;top:262;left:329;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div8" class="divs" title="node8" style="width:13px;height:12px;position:absolute;top:245;left:337;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div10" class="divs" title="node10" style="width:13px;height:12px;position:absolute;top:228;left:496;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div11" class="divs" title="node11" style="width:13px;height:12px;position:absolute;top:242;left:493;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div12" class="divs" title="node12" style="width:13px;height:12px;position:absolute;top:239;left:505;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div13" class="divs" title="node13" style="width:10px;height:12px;position:absolute;top:255;left:503;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div14" class="divs" title="node14" style="width:12px;height:12px;position:absolute;top:267;left:497;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div15" class="divs" title="node15" style="width:16px;height:12px;position:absolute;top:314;left:512;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div16" class="divs" title="node16" style="width:13px;height:12px;position:absolute;top:298;left:535;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div17" class="divs" title="node17" style="width:13px;height:12px;position:absolute;top:292;left:493;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div18" class="divs" title="node18" style="width:11px;height:12px;position:absolute;top:290;left:478;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div19" class="divs" title="node19" style="width:13px;height:12px;position:absolute;top:308;left:478;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div20" class="divs" title="node20" style="width:13px;height:12px;position:absolute;top:302;left:464;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div21" class="divs" title="node21" style="width:13px;height:12px;position:absolute;top:290;left:456;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div22" class="divs" title="node22"style="width:13px;height:12px;position:absolute;top:333;left:436;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div23" class="divs" title="node23" style="width:13px;height:12px;position:absolute;top:310;left:425;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div24" class="divs" title="node24" style="width:11px;height:20px;position:absolute;top:290;left:422;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div25" class="divs" title="node25" style="width:13px;height:17px;position:absolute;top:285;left:412;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div26" class="divs" title="node26" style="width:13px;height:15px;position:absolute;top:290;left:395;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div27" class="divs" title="node27" style="width:13px;height:12px;position:absolute;top:320;left:388;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div28" class="divs" title="node28" style="width:13px;height:17px;position:absolute;top:445;left:383;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div29" class="divs" title="node29" style="width:13px;height:15px;position:absolute;top:452;left:368;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
        <div id="div30" class="divs" title="node30" style="width:13px;height:17px;position:absolute;top:468;left:387;background-color:#ff4c4c;opacity:0.5;display:none;"></div>

        <div class="divs smallViewer" style="display:none;" id="viewer"> 
                        <div class="papaya"> </div> 
                    </div>

        <div id="lymphNode" class="divs" style="display:none;width:830px; height:548px;"> 
        <img src="image.jpg" width="500" height="500" alt="Planets" usemap="#imageMap">

        <map id="imageMap" name="imageMap">
            <area shape="circle" coords="325,185,10" href="#" alt="Buccal Node1" title="Buccal Node1" id="node1"/>
            <area shape="circle" coords="345,185,8" href="#" alt="Buccal Node2" title="Buccal Node2" id="node2"/>
            <area shape="circle" coords="256,214,8" href="#" alt="Buccal Node3" title="Buccal Node3" id="node3"/>
            <area shape="circle" coords="239,216,8" href="#" alt="Buccal Node4" title="Buccal Node4" id="node4"/>
            <area shape="circle" coords="251,248,8" href="#" alt="Buccal Node5" title="Buccal Node5" id="node5"/>
            <area shape="circle" coords="192,250,8" href="#" alt="Buccal Node6" title="Buccal Node6" id="node6"/>
            <area shape="circle" coords="170,266,8" href="#" alt="Buccal Node7" title="Buccal Node7" id="node7"/>
            <area shape="circle" coords="177,248,8" href="#" alt="Buccal Node8" title="Buccal Node8" id="node8"/>
            <area shape="circle" coords="336,233,8" href="#" alt="Buccal Node10" title="Buccal Node10" id="node10"/>
            <area shape="circle" coords="336,246,5" href="#" alt="Buccal Node11" title="Buccal Node11" id="node11"/>
            <area shape="circle" coords="344,241,5" href="#" alt="Buccal Node11" title="Buccal Node12" id="node12"/>
            <area shape="circle" coords="342,260,5" href="#" alt="Buccal Node11" title="Buccal Node13" id="node13"/>
            <area shape="circle" coords="337,272,5" href="#" alt="Buccal Node11" title="Buccal Node14" id="node14"/>
            <area shape="circle" coords="353,316,10" href="#" alt="Buccal Node11" title="Buccal Node15" id="node15"/>
            <area shape="circle" coords="376,303,8" href="#" alt="Buccal Node11" title="Buccal Node16" id="node16"/>
            <area shape="circle" coords="332,295,8" href="#" alt="Buccal Node11" title="Buccal Node17" id="node17"/>
            <area shape="circle" coords="316,293,5" href="#" alt="Buccal Node11" title="Buccal Node18" id="node18"/>
            <area shape="circle" coords="317,313,5" href="#" alt="Buccal Node11" title="Buccal Node19" id="node19"/>
            <area shape="circle" coords="304,305,5" href="#" alt="Buccal Node11" title="Buccal Node20" id="node20"/>
            <area shape="circle" coords="297,293,5" href="#" alt="Buccal Node11" title="Buccal Node21" id="node21"/>
            <area shape="circle" coords="275,337,5" href="#" alt="Buccal Node11" title="Buccal Node22" id="node22"/>
            <area shape="circle" coords="268,314,8" href="#" alt="Buccal Node11" title="Buccal Node23" id="node23"/>
            <area shape="circle" coords="260,300,10" href="#" alt="Buccal Node11" title="Buccal Node24" id="node24"/>
            <area shape="circle" coords="251,291,8" href="#" alt="Buccal Node11" title="Buccal Node25" id="node25"/>
            <area shape="circle" coords="234,296,5" href="#" alt="Buccal Node11" title="Buccal Node26" id="node26"/>
            <area shape="circle" coords="229,323,5" href="#" alt="Buccal Node11" title="Buccal Node27" id="node27"/>
            <area shape="circle" coords="224,451,5" href="#" alt="Buccal Node11" title="Buccal Node28" id="node28"/>
            <area shape="circle" coords="209,457,5" href="#" alt="Buccal Node11" title="Buccal Node29" id="node29"/>
            <area shape="circle" coords="228,474,8" href="#" alt="Buccal Node11" title="Buccal Node30" id="node30"/>
        </map>
  </div>

  <div id="userForm" class="divs" style="height:550px; width: 800px;display:none;"> 
                        <div class="container" style="width:800px;margin-top:20px;">
                            <form role="form">
                                <div class="form-group">
                                    <label for="id">Patient ID:  <input type="email" class="form-control" id="email"></label>
                                </div>
                                <div class="form-group">
                                    <label for="pname"> Patient Name : 
                                        <input type="text" class="form-control" id="pname"> </label>
                                </div>
                                <div class="radio"> <label for="pgender" > Gender : </label>
                                    <label><input type="radio" name="optradio1">Male</label>
                                    <label><input type="radio" name="optradio1">Female</label>
                                </div>
                                <br/>
                                <div class="form-group">
                                    <label for="pAge"> Patient Age : 
                                        <input type="text" class="form-control" id="page"> </label>
                                </div>
                                <div class="radio"> <label for="psmoking" > Smoking Status : </label>
                                    <label><input type="radio" name="optradio2"> Yes </label>
                                    <label><input type="radio" name="optradio2"> No </label>
                                </div>
                                <br/>
                                <div class="radio"> <label for="psmoking" > Ethnicity : </label>
                                    <label><input type="radio" name="optradio3"> White </label>
                                    <label><input type="radio" name="optradio3"> African American </label>
                                    <label><input type="radio" name="optradio3"> Hispanic </label>
                                    <label><input type="radio" name="optradio3"> Asian/Pacific Islander </label>
                                    <label><input type="radio" name="optradio3"> Other </label>
                                </div>

                                <div class="checkbox">
                                    <label><input type="checkbox" value="">Glottic</label>
                                </div>
                                <div class="checkbox">
                                    <label><input type="checkbox" value="">Subglottic</label>
                                </div>
                                <div class="checkbox">
                                    <label><input type="checkbox" value="">Supraglottic</label>
                                </div>
                                <div class="checkbox">
                                    <label><input type="checkbox" value="">Transglottic</label>
                                </div>
                                <button type="submit" class="btn btn-default">Submit</button>
                            </form>
                        </div>
  </div>
  </div>
</body>
<script>

</script>
</html>

关于jquery - 添加div后图像不断向下移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33503693/

文章推荐： C# 数据包发送到 c++ winsockets

文章推荐： c++ - OpenGl翻译

文章推荐： c++ - 在 C++ 中以长度指示器方式从二进制文件中读取

文章推荐： html - 如何对齐导航标签内的菜单位置

javascript - 如何在单击添加时隐藏最后一次单击(添加)按钮以及当用户单击删除按钮然后显示上一个隐藏(添加)按钮
我创建了一个用户可以添加测试的字段。这一切运行顺利我只希望当用户点击(添加另一个测试)然后上一个(添加另一个测试)删除并且这个显示在新字段中。所有运行良好的唯一问题是点击(添加另一个字段)之前添加另
java - 将数组的内容添加到 JFrame，添加 JPanel，添加 JScroll
String[] option = {"Adlawan", "Angeles", "Arreza", "Benenoso", "Bermas", "Brebant
php - 为什么我们不能使用 MAC 添加。而不是 IP 添加
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。这个问题似乎不是关于 a specific programming problem, a softwar
jquery - 添加 jQuery Nav-tab 添加 Bootstrap
我正在努力将 jQuery 滚动功能添加到 nav-tab (Bootstrap 3)。我希望用户能够选择他们想要的选项卡，并在选项卡内容中有一个可以平滑滚动到 anchor 的链接。这是我的代码，可
jquery - 添加 CSS 到 jQuery Ui Tab 添加
我正在尝试在用户登录后再添加 2 个 ui 选项卡。首先，我尝试做一个之后。 $('#slideshow').tabs('remove', '4'); $("#slideshow ul li:last
javascript - 使用 JavaScript 添加/删除元素(添加/删除带有编号 ID 和名称的字段)
我有一个包含选择元素的表单，我想通过选择添加和删除其中一些元素。这是html代码(这里也有jsfiddle http://jsfiddle.net/txhajy2w/):
ios - 添加 alpha 以查看 VS 添加 alpha 到 UIColor
正在写这个: view.backgroundColor = UIColor.white.withAlphaComponent(0.9) 等同于: view.backgroundColor = UICo
Javascript 添加
好的，如果其中有任何信息，我想将这些列添加到一起。所以说我有账户 1 2 3 . 有 4 个帐户空间，但只有 3 个帐户。我如何创建 java 脚本来添加它。最佳答案 Live Example H
添加/减去数字以查找是否可以生成数字的算法？
我想知道是否有一种有效的预制算法来确定一组数字的和/差是否可以等于不同的数字。示例: 5、8、10、2，使用 + 或 - 等于 9。5 - 8 = -3 + 10 = 7 + 2 = 9 如果有一个预
Git卡在状态/添加/提交
我似乎有一个卡住的 git repo。它卡在所有基本的添加、提交命令上，git push 返回所有内容为最新的。从其他帖子我已经完成了 git gc 和 git fsck/ 我认为基本的调试步骤是
sql - 添加 where 子句会使查询速度变慢
我的 Oracle SQL 查询如下- Q1- select hca.account_number, hca.attribute3, SUM(rcl.extended_amou
iPhone:添加 UIRequiredDeviceCapability
我正在阅读 http://developer.apple.com/iphone/library/documentation/iPhone/Conceptual/iPhoneOSProgrammingG
javascript - 添加 "more"按钮
我正在尝试添加一个“加载更多”按钮并限制下面的结果，这样投资组合页面中就不会同时加载 1000 个内容，如下所示:http://typesetdesign.com/portfolio/ 我对 PHP
javascript - 添加，使用Javascript函数添加多个文本框
我遇到这个问题，我添加了 8 个文本框，它工作正常，但是当我添加更多文本框(如 16 个文本框)时，它不会添加最后一个文本框。有人遇到过这个问题吗？提前致谢。 Live Link: JAVASCRIP
javascript - 添加/删除克隆第一行默认不删除
add/remove clone first row default not delete 添加/删除克隆第一行默认不删除&并获取正确的SrNo(例如:添加3行并在看到问题后删除SrNo.2)
javascript - 添加/删除表单中的输入
我编码this ，但删除按钮不起作用。我在控制台中没有任何错误.. var counter = 0; var dataList = document.getElementById('materi
javascript - 添加/删除类似数组的对象中的元素
我有一个类似数组的对象: [1:数组[10]、2:数组[2]、3:数组[2]、4:数组[2]、5:数组[3]、6:数组[1]] 我正在尝试删除前两个元素，执行一些操作，然后将它们再次插入到同一位置。
arrays - 添加/删除单元格时保持数组排序的最佳方法
使用的 Delphi 版本:2007 你好，我有一个 Tecord 数组 TInfo = Record Name : String; Price : Integer; end; var Info
javascript - 添加/删除小部件以及调整大小不起作用
我使用了基本的 gridster 代码，然后我声明了通过按钮添加和删除小部件的函数它工作正常但是当我将调整大小功能添加到上面的代码中时，它都不起作用(我的意思是调整大小，添加和删除小部件) 我的js代
javascript - 添加/删除上一个或下一个父级中的类
title 323 323 323 title 323 323 323 title 323 323 323 JS $(document).keydown(function(e){

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 添加div后图像不断向下移动