为了账号安全,请及时绑定邮箱和手机立即绑定

如何用JQ实现点击按钮改变显示内容+按钮本身文字更改,再次点击变回来?

/ 猿问

如何用JQ实现点击按钮改变显示内容+按钮本身文字更改,再次点击变回来?

<div class="box-01">普通搜索内容</div>
<div class="box-02">高级搜索内容</div>
<button>高级搜索<button>

默认显示“box-01”的内容,当点击按钮后,要执行两个操作:
1.隐藏box-01的内容,显示box-02的内容;
2.按钮本身的文字由“高级搜索”更改为“普通搜索”


查看完整描述

1 回答

已采纳
?
千秋此意
var isAdvanced = false;
$('div[class*="box"]').hide();
$('.box-01').show();
$('button').on('click', function() {
   isAdvanced = !isAdvanced;
   if (isAdvanced) {
       $('.box-01').hide();
       $('.box-02').show();
       $(this).text('高级搜索');
   } else {
       $('.box-01').show();
       $('.box-02').hide();
       $(this).text('普通搜索');
   }
});


查看完整回答
2 反对 回复 2018-06-24
点击展开后面1

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信