首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何滑动一个div并在每次点击工具幻灯片时显示不同的内容?

如何滑动一个div并在每次点击工具幻灯片时显示不同的内容?
EN

Stack Overflow用户
提问于 2018-07-23 02:24:05
回答 1查看 23关注 0票数 0

每次单击toogle-slide按钮时,我都会尝试在div之间切换。另外,每次单击switch按钮时,另一个按钮都应该隐藏/显示。

html代码:

<div id="divParticipants">
click 'on' to hide the button and show the second content 
</div>
<div id="divPackage" style='display:none'>
click 'off' to hide the button and hide first content 
</div>

<button type="button" id='add-new'>
another button 
</button>

javascript代码:

$(function () {
        $('#package-toogle').change(function () {
            $('#divParticipants').hide("slide", { direction: "right" }, 400, function () {
               $('#add-new').hide(); 
            });

            $('#divPackage').show("slide", { direction: "left" }, 400, function () {
                $('#add-new').show();
            });
        })
    });

我花了半个小时试着让它工作,但没能让它工作。如果你能教我怎么做,我将不胜感激。这是jsfiddle链接。

https://jsfiddle.net/p9qarjg0/36/

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-23 02:32:07

请尝试使用切换。

      $(function () {
        $('#package-toogle').on('change', function () {
            $('#divParticipants').toggle("slide", { direction: "right" }, 400, function () {
            });

            $('#divPackage').toggle("slide", { direction: "left" }, 400, function () {
            });
          $('#add-new').toggle();
        })
    });
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51468044

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档