如何根据按钮的值在单击事件上显示/隐藏 Div

debugcn 发表于 Dev

泰米尔语

我正在做模拟测试门户项目，你能建议我如何根据按钮的值显示或隐藏 div。

html代码##

<input type='button' value='Generate' onclick='f1(this)' />

Div部分

<div id="sub_section" class="col s6" style="display:none">
 <TABLE STYLE="BORDER:2PX; BACKGROUND-COLOR:BLACK;">
 <TR>
 <td><label style="color:black;">TAMIL</label></td>
 </TR>
 </TABLE>   
 </div>
 </div>

查询

function f1(objButton){  
var a=objButton.val;
   if(var a=='Generate')
    $("#sub_section").show();
}

jquery min.js

<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

AdminDev826

下面的示例将演示如何基于单击按钮来显示和隐藏 div 元素。您可以使用toggle()function 或show(), hide()function

$(document).ready(function(){
    $('input[type="button"]').click(function(){
        var inputValue = $(this).attr("value");
        $("." + inputValue).toggle();
    });
});

.box{
   color: #fff;
   padding: 20px;
   display: none;
   margin-top: 20px;
}
.red, .redbtn{ background: #ff0000; }
.green, .greenbtn{ background: #228B22; }
.blue, .bluebtn{ background: #0000ff; }
label{ margin-right: 15px; }
.btn { 
   width: 100px;
   height: 30px;
   font-size: 20px;
   font-weight: 600;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
   <label><input type="button" class="btn redbtn" value="red" />
   <label><input type="button" class="btn greenbtn" value="green" />
   <label><input type="button" class="btn bluebtn" value="blue" />
</div>
<div class="red box">You have selected <strong>red button</strong> so i am here</div>
<div class="green box">You have selected <strong>green button</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue button</strong> so i am here</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。