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

如何用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
  • Forever丶前端
    Forever丶前端
    非常感谢,你的回答对我很有帮助!
  • Forever丶前端
    Forever丶前端
    大神我再问下那个我的button里面如果是文字+图标的形式 比如: <button>高级搜索<span class="icon icon-01"></span></button> 改成: <button><span class="icon icon-02"></span高级搜索></button> 这样能实现吗?
  • qq_云水边静沐暖阳_04205942
    qq_云水边静沐暖阳_04205942
    可以的,用.html()方法改变button里的内容
点击展开后面1

添加回答

回复

举报

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