使用相同的ID隐藏多个div

时间:2013-05-16 12:52:04

标签: javascript jsp

我想使用相同的脚本函数隐藏多个div。它可能吗?我隐藏了一个div ...检查我的代码

HTML

 <div id="bookingDiv">
           <table><tr><td>

            <table>
                <tr>
            <td class="labelTd">
                        <label>Employee Name
                        </label>
                    </td>
                    <td class="fieldTd">
                        <input type="text" class="txt-med2" style="color: blue" name="txtEmployeeName"  id="txtEmployeeName" readonly tabindex="6" value="<%=strEmployeeName%>" size="11" maxlength="11" />

                    </td>

                   </tr>


                    <tr>
                    <td class="labelTd">
                        <label> Travel Date From
                        </label>
                    </td>
                    <td class="fieldTd">
                         <input type="text" class="txt-med2" style="color: blue"  id="txtDateFrom"   readonly name="txtDateFrom" size="11" maxlength="11" tabindex="4"    value="<%=strDateFrom%>"   style=" width : 136px;" />
                     </td>
                    </tr>
                    <tr>
                    <td class="labelTd">
                        <label> Purpose of Visit 
                        </label>
                    </td>

                    <td class="fieldTd">
                        <input type="text" class="txt-med2" style="color: blue"  name="txtPurposeOfVisit"  value="<%=strPurpose%>" class="textArea-Medium" tabindex="5" style=" width : 144px;"></input>
                    </td>
                    <td></td>
                </tr>

                </table>
                 </td>

           <td>
           <table>
            <tr>
            <td class="labelTd">
                        <label>Designation
                        </label>
                    </td>
                    <td class="fieldTd">
                        <input type="text" class="txt-med2" style="color: blue" name="txtDesignation"  readonly id="txtDesignation" tabindex="8" value="<%=strDesignation%>" size="11"  maxlength="11" />

                    </td>
                   </tr>
                   <tr>
            <td class="labelTd">
                        <label>Employee Grade
                        </label>
                    </td>
                    <td class="fieldTd">
                        <input type="text" class="txt-med2" style="color: blue" name="txtEmployeeGrade"  readonly id="txtEmployeeGrade" tabindex="7" value="<%=strEmployeeGrade%>" size="11" maxlength="11" />

                    </td>
                   </tr>


                      <tr>
            <td class="labelTd">
                        <label>Advance&nbsp;Amount Requested
                        </label>
                    </td>
                    <td class="fieldTd">
                        <input type="text" class="txt-med2" style="color: blue" name="txtAdvanceAmountReq"  readonly id="txtAdvanceAmountReq" tabindex="10" value="<%=approvedAmt%>" size="8"  maxlength="11" />

                    </td>
                   </tr>
                              <tr>
            <td class="labelTd">
                        <label>Additional&nbsp;Amount Requested
                        </label>
                    </td>
                    <td class="fieldTd">
                        <input type="text" class="txt-med2" style="color: blue" name="txtAdditionalAmountReq"  readonly id="txtAdditionalAmountReq" tabindex="11" value="<%=strAdditionalAmountReq%>" size="8" maxlength="11" />
                        </td>
                  </tr>
                   </table>

           </td>

            </tr>
            </table> 

            </div>

JavaScript代码

   function showDiv()
         {
    var tmp1=document.getElementById("txtTravelId");
    if(tmp1.value=="")
     {
        document.getElementById("bookingDiv").style.display = 'none';
            }
    else
    {
        document.getElementById("bookingDiv").style.display = 'block';
    }
         }

2 个答案:

答案 0 :(得分:3)

Id 's是唯一的。

如果您使用jQuery,那么。您可以对所有div使用相同的class$('.className').hide();

如果你想在javascript中使用解决方案

在某些浏览器中有getElementsByClassName,但它并不像getElementById那样受到广泛支持。 SEE HERE

否则你可以对不同的div使用不同的id然后使用id隐藏

答案 1 :(得分:0)

ID应该是唯一值。但是,要将div组合在一起,您可以使用相同的类名。这是一个例子。

<div id="name" class="myClass">...</div>
<div id="address" class="myClass">...</div>
<div id="email" class="myOtherClass">...</div>

jQuery允许您隐藏多个具有相同类名的元素,如此

$(".myClass").hide();

会隐藏nameaddress div,但不会隐藏email div。 .show();让它们再次可见。

根据您打算做的事情,您可以将想要隐藏的所有内容放在div中,只需隐藏该div。