猿问
下载APP

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

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

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


Forever丶前端
浏览 19597回答 1
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('普通搜索');    } });
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答