jQuery技术:javascript / jquery简写代码和活动函数

我有这个代码,我想知道是否有更短的编写方式?

还有哪些代码,我需要在相关的div上使活动标签保持活动状态

谢谢

$(document).ready(function () { $(".overveiw").click(function () { $(".div1").show(); $(".div2").hide(); $(".div3").hide(); $(".div4").hide(); $(".div5").hide(); }); $(".tour").click(function () { $(".div2").show(); $(".div1").hide(); $(".div3").hide(); $(".div4").hide(); $(".div5").hide(); }); $(".websites").click(function () { $(".div3").show(); $(".div1").hide(); $(".div2").hide(); $(".div4").hide(); $(".div5").hide(); }); $(".faq").click(function () { $(".div4").show(); $(".div1").hide(); $(".div3").hide(); $(".div2").hide(); $(".div5").hide(); }); $(".support").click(function () { $(".div5").show(); $(".div1").hide(); $(".div3").hide(); $(".div4").hide(); $(".div2").hide(); }); }); 

    给每个div另一个类:

     

    然后:

     $(".overveiw").click(function () { $(".new_class").hide(); $(".div1").show(); }); 

    看起来你要做的就是显示一个div并在点击其他元素时隐藏其他一些 – 例如,标签界面。

    简单的方法是使用某人已经为你构建的东西,比如jQuery UI的标签 。

    但是你也可以通过给出一些共同的信息,轻松地将div显示为显示/隐藏(面板)和你点击的div(选项卡)。 例如,如果在面板上放置一个属性来标识它们所属的选项卡,则会缩短:

     $(".overview, .tour, .websites, .faq").click(function() { var thisTab = $(this).attr("data-panel"); var container = $("#container"); container.find("div").hide(); container.find("div[data-panel=" + thisTab + "]").show(); }); 

    …如果您在选项卡和面板上同意放置data-panel属性,则有效。 实例

    但是如果你在没有JavaScript的情况下运行那个实例,请注意它不会很好地降级。 这就是为什么你通常会看到这个用导航的列表和锚点完成的,例如,像这样:

      

    使用此代码:

     $("#container div:not(#overview)").hide(); $("#tabs > li > a").click(function() { var thisTab = this.href; var index = thisTab.indexOf("#"); if (index >= 0) { thisTab = thisTab.substring(index + 1); } $("#container div").hide(); $("#" + thisTab).show(); return false; }); 

    实例

      以上就是jQuery教程分享javascript / jquery简写代码和活动函数相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注(计算机技术网)。

      本文来自网络收集,不代表计算机技术网立场,如涉及侵权请点击右边联系管理员删除。

      如若转载,请注明出处:https://www.ctvol.com/jquerytutorial/524621.html

      (0)
      上一篇 2020年12月13日
      下一篇 2020年12月13日

      精彩推荐