jquery - 单击按钮时显示div - Thinbug

单击按钮时显示div

时间：2013-03-07 07:44:36

标签： jquery

我正在尝试使用<div>显示id="importLocations"，当我点击“go”按钮时 - 它一切正常但我想用jquery做，但我无法做到工作：

<script>
   function onClickButton(){
      alert("Came inside");
      document.getElementById('importLocations').style.display ='inline';
   }
</script>
<label>Functions/Tools :</label>
 <select id ="selFunction" name ="selFunction" class ="DataEntryField">
<option value ="Select">Select</option>
<optgroup label="Import From">
<option value ="1">India</option>
<option value ="2">America</option>
<option value ="3">china</option>

</optgroup>             
 </select>
<input type="button" value="Go" id="functionBtn" onClick="onClickButton()" class = "input"/>

<div id="importLocations" style="display:none;" class="header">
 <span id="locatinCaption">Import Location</span> <span class="close">
 <img id="closeLoc" width="15px" height="15px" alt="Close this section" src="/resources/images/crossMark.gif"/></span>
<br/>
<label class="DataEntryLabel"> Search by </label>
<input  type="text" id="importLocation" value="select" size="30" readonly="readonly"/>
 <input  type="text" id="searchTextArea" size="30" class="DataEntryField"/>
 <button type="button" id="importLoc" value="importLoc" class="DataEntryButton"/>search</button>
 </div>

2 个答案:

答案 0 :(得分：3)

在<head>内，添加：

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

以这种方式使用：

function onClickButton(){
    $('#importLocations').show();
}

小提琴：http://jsfiddle.net/praveenscience/PLvtc/1/

或者，不引人注意地：

$(document).ready(function(){ 
    $('#functionBtn').click(function(){ 
        $('#importLocations').show();
    });
});

小提琴：http://jsfiddle.net/praveenscience/PLvtc/2/

答案 1 :(得分：0)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>    
$(document).ready(function(){ 
$('#functionBtn').click(function(){ 
$('#importLocations').show();
});
});
</script>

将这些脚本标记放在页面的“头部”中。