您的位置：首页 > Web前端 > JavaScript

简单运用Javascript，使<input/>控制display属性div的显示隐藏

2017-10-26 09:31 736 查看

主要是运用了Jquery的css（）方法。

代码：

html部分

<! DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="/disk/weiqin/js/jquery.js" type="text/javascript"></script>

</head>

<body>

<input type="button" id="but_a" value=" " />个人

<input type="button" id="but_b" value=" " />公司

<div id="text1" style=" display:block; "> 个人</div>

<div id="text2" style=" display:none; ">公司</div>

</body>

</html>

javacript部分

<script type="text/javascript">

  $("#but_a").click(function () {



var obj_a = $('#test1').css('display');

if (obj_a === 'none') {

// $("#test2").toggle();

// $("#test1").toggle();

var divsty_a = document.getElementById('test1');

var divsty_b = document.getElementById('test2');

divsty_a.style.cssText = 'display: block;';

divsty_b.style.cssText = 'display: none ;';



}

});

$("#but_b").click(function () {



var obj_a = $('#test2').css('display');



if (obj_a === 'none') {

var divsty_a = document.getElementById('test1');

var divsty_b = document.getElementById('test2');

divsty_a.style.cssText = 'display:
none;';

  divsty_b.style.cssText = 'display:
block;';

}

});

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航