html 点击一个按钮显示另一个div 隐藏之前呢个div_随笔

<html>

<head>

<style>

div{display:none}

</style>

$(function(){

$("button").click(function(){

var index = $(this).index()

$(".d").hide()

$(".d:eq("+index+")").show()

})

</script>

</head>

<body>

</body>

</html>

自行引入jquery文件

1、新建一个html文件，命名为test.html。

2、在test.html文件内，在p标签内，使用button标签创建多个按钮。

3、在test.html文件内，分别设置button标签的class属性为bbtt，用于下面获得button对象。

4、在js标签内，使用ready()方法在页面加载完成时，执行function方法。

5、在function方法内，通过class获得button对象，给它们绑定click点击事件，当按钮被点击时，获得按钮对象，使用not()方法除去当前点击按钮，通过attr()方法将disabled属性设置为true，实现其他按钮不可用。

需要准备的材料分别是：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建一个html文件，例如：index.html。

2、在index.html文件的<script>标签中，写入js：

$('button').click(function () {

$('div').hide()

$('div').eq(parseInt(3 * Math.random())).show()

})

3、浏览器运行index.html页面，此时点击btn按钮总会显示其中1个div和隐藏另外2个div。

欢迎分享，转载请注明来源：内存溢出

html 点击一个按钮显示另一个div 隐藏之前呢个div