onclick показать div и скрыть другой div не работает - PullRequest
Новая
       133

onclick показать div и скрыть другой div не работает

0 голосов
/ 29 мая 2020

Не могли бы вы мне помочь?

Мой код не работает, раздел не отображается после нажатия на нижний раздел. 

<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/

Большое спасибо!

Ответы [ 2 ]

1 голос
/ 29 мая 2020

Это альтернативный вариант, отличный от @ 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();
    });
});
0 голосов
/ 29 мая 2020

Попробуйте это.

Ваша 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>
...