onclick 显示 div 并隐藏其他 div 不起作用答案

【问题标题】：onclick show div and hide other div doesn't workonclick 显示 div 并隐藏其他 div 不起作用
【发布时间】：2020-05-29 07:08:52
【问题描述】：

你能帮帮我吗？

我的代码不起作用，单击底部后该部分不显示。

<script>
$("#img1").on('click', function() {
   $("#div1").fadeIn();
   $("#div2,#div3,#div4").fadeOut();
});
$("#img2").on('click', function() {
   $("#div2").fadeIn();
   $("#div1,#div3,#div4").fadeOut();
});
$("#img3").on('click', function() {
   $("#div3").fadeIn();
   $("#div1,#div2,#div4").fadeOut();
});
$("#img4").on('click', function() {
   $("#div4").fadeIn();
   $("#div1,#div2,#div3").fadeOut();
});
</script>

http://bookshark.phlexon.com/home-2/

非常感谢！

【问题讨论】：

您好，请向我们展示足以重现问题的相关代码，而不是您的网站。
如果您检查浏览器的控制台，您会看到错误：TypeError: $ is not a function。确保您已经加载了使 jquery 工作所需的所有脚本。
尽量牢记DRY principle，并检查是否可以减少该代码。

标签： jquery css show-hide

【解决方案1】：

这是@aviboy2006 以外的替代选项。

您可以插入 jQuery 路径以使用 $ 符号。

<link rel='stylesheet' id='dashicons-css'  href='http://bookshark.phlexon.com/wp-includes/css/dashicons.min.css?ver=5.4.1' type='text/css' media='all' />
<!-- ****************** Add in jQuery path ************************************************-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- ***************************************************************************************-->
<script type='text/javascript' src='http://bookshark.phlexon.com/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script>
<script type='text/javascript' src='http://bookshark.phlexon.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js?ver=5.4.1'></script>

然后，您的代码应该如下工作：（包裹在$(document).ready(function(){内）

$(document).ready(function(){
    $("#img1").on('click', function() {
       $("#div1").fadeIn();
       $("#div2,#div3,#div4").fadeOut();
    });
    $("#img2").on('click', function() {
       $("#div2").fadeIn();
       $("#div1,#div3,#div4").fadeOut();
    });
    $("#img3").on('click', function() {
       $("#div3").fadeIn();
       $("#div1,#div2,#div4").fadeOut();
    });
    $("#img4").on('click', function() {
       $("#div4").fadeIn();
       $("#div1,#div2,#div3").fadeOut();
    });
});

【讨论】：

@ЕленаЛинчук 很高兴我能提供帮助

【解决方案2】：

试试这个。

您的 jQuery 库已启动，但 $ 不是其中的一部分。

<script>
jQuery("#img1").on('click', function() {
   jQuery("#div1").fadeIn();
   jQuery("#div2,#div3,#div4").fadeOut();
});
jQuery("#img2").on('click', function() {
   jQuery("#div2").fadeIn();
   jQuery("#div1,#div3,#div4").fadeOut();
});
jQuery("#img3").on('click', function() {
   jQuery("#div3").fadeIn();
   jQuery("#div1,#div2,#div4").fadeOut();
});
jQuery("#img4").on('click', function() {
   jQuery("#div4").fadeIn();
   jQuery("#div1,#div2,#div3").fadeOut();
});
</script>

【讨论】：