Блог

Главная - Вопросы по программированию - Как загрузить Javascript на вкладке переключения?

Как загрузить Javascript на вкладке переключения?

#javascript #html #jquery #bootstrap-4

#javascript #HTML #jquery #bootstrap-4

Вопрос:

Как загрузить мой 2-й Javascript в меню toggle-tab 1? я попробовал это с помощью функции .click, но после этого он отправляет спам в картинную галерею.

 <script>
         $(document).ready(function() {
            $("#content-slider").lightSlider({
                loop:true,
                keyPress:true
            });
            $('#image-gallery').lightSlider({
                gallery:true,
                item:1,
                thumbItem:10,
                slideMargin: 0,
                speed:500,
                auto:false,
                loop:true,
                onSliderLoad: function() {
                    $('#image-gallery').removeClass('cS-hidden');
                }  
            });
        });
    </script>
    <script>
         $(document).click(function() {
            $("#content-slider").lightSlider({
                loop:true,
                keyPress:true
            });
            $('#image-gallery1').lightSlider({
                gallery:true,
                item:1,
                thumbItem:10,
                slideMargin: 0,
                speed:500,
                auto:false,
                loop:true,
                onSliderLoad: function() {
                    $('#image-gallery1').removeClass('cS-hidden');
                }  
            });
        });
    </script> 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet"  href="https://www.fewo-graf-karlshagen.de/src/css/lightslider.css"/>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3 MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 
    <script src="https://www.fewo-graf-karlshagen.de/src/js/lightslider.js"></script>
    <script>
         $(document).ready(function() {
            $("#content-slider").lightSlider({
                loop:true,
                keyPress:true
            });
            $('#image-gallery').lightSlider({
                gallery:true,
                item:1,
                thumbItem:10,
                slideMargin: 0,
                speed:500,
                auto:false,
                loop:true,
                onSliderLoad: function() {
                    $('#image-gallery').removeClass('cS-hidden');
                }  
            });
        });
    </script>
    <script>
         $(document).click(function() {
            $("#content-slider").lightSlider({
                loop:true,
                keyPress:true
            });
            $('#image-gallery1').lightSlider({
                gallery:true,
                item:1,
                thumbItem:10,
                slideMargin: 0,
                speed:500,
                auto:false,
                loop:true,
                onSliderLoad: function() {
                    $('#image-gallery1').removeClass('cS-hidden');
                }  
            });
        });
    </script>
    <body>
    <section class="w3ls-bnrbtm pt-5" id="about">
        <div class="container py-xl-5 py-lg-3">
          <h3 class="title-w3lssite text-center text-wh mb-0">HOME</h3>
         
<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
    </li>
  </ul>

  
  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <div class="row pb-1">
                    <div class="col-lg-6">
                <div class="clearfix" style="max-width:540px;">
                <ul id="image-gallery" class="gallery list-unstyled cS-hidden">
                    <li data-thumb="https://www.fewo-graf-karlshagen.de/images/knurrhahn/thumbs/zim_s_238842_007.jpg"> 
                        <img src="https://www.fewo-graf-karlshagen.de/images/knurrhahn/site/obj_full_91963_003.jpg" />
                         </li>
                    <li data-thumb="https://www.fewo-graf-karlshagen.de/images/knurrhahn/thumbs/zim_s_238842_015.jpg"> 
                        <img src="https://www.fewo-graf-karlshagen.de/images/knurrhahn/site/zim_full_238842_015.jpg" />
                         </li>
                     <li data-thumb="https://www.fewo-graf-karlshagen.de/images/knurrhahn/thumbs/zim_s_238842_013.jpg"> 
                        <img src="https://www.fewo-graf-karlshagen.de/images/knurrhahn/site/obj_full_91963_008.jpg" />
                         </li>
                     <li data-thumb="https://www.fewo-graf-karlshagen.de/images/knurrhahn/thumbs/zim_s_238842_011.jpg"> 
                        <img src="https://www.fewo-graf-karlshagen.de/images/knurrhahn/site/zim_full_238842_011.jpg" />
                         </li>
                     <li data-thumb="https://www.fewo-graf-karlshagen.de/images/knurrhahn/thumbs/obj_91963_007.jpg"> 
                        <img src="https://www.fewo-graf-karlshagen.de/images/knurrhahn/site/obj_full_91963_007.jpg" />
                         </li>
                     <li data-thumb="https://www.fewo-graf-karlshagen.de/images/knurrhahn/thumbs/zim_s_238842_004.jpg"> 
                        <img src="https://www.fewo-graf-karlshagen.de/images/knurrhahn/site/zim_full_238842_004.jpg" />
                         </li>
                </ul>
            </div>
            </div>
                
                <div class="col-lg-3 pl-lg-1 abou-right-w3layuts mt-lg-0 mt-5">
            <ul class="list-group">
                <li class="list-group-item"><span class="fa fa-expand"></span> 50 m²</li>
                <li class="list-group-item"> <span class="fa fa-users"></span> max. 2 Pers</li>
                <li class="list-group-item" ><span class="fa fa-coffee"></span> Kitchen</li>
                <li class="list-group-item"><span class="fa fa-bed"></span> 1 Room</li>
                <li class="list-group-item"><span class="fa fa-shower"></span> 1 Shower</li> 
                <li class="list-group-item"><span class="fa fa-glass"></span> 1 Terrass</li>
                </ul>
                </div>
                </div>
    </div>
    
      <div id="menu1" class="container tab-pane fade"><br>
    <h3>Menu 1</h3>
      <div class="row pb-1">
                    <div class="col-lg-6">
    <div class="clearfix" style="max-width:540px;">
    <ul id="image-gallery1" class="gallery list-unstyled cS-hidden">
                    <li data-thumb="https://www.fewo-graf-karlshagen.de/images/knurrhahn/thumbs/zim_s_238842_007.jpg"> 
                        <img src="https://www.fewo-graf-karlshagen.de/images/knurrhahn/site/obj_full_91963_003.jpg" />
                         </li>
                    <li data-thumb="https://www.fewo-graf-karlshagen.de/images/knurrhahn/thumbs/zim_s_238842_015.jpg"> 
                        <img src="https://www.fewo-graf-karlshagen.de/images/knurrhahn/site/zim_full_238842_015.jpg" />
                         </li>
                     <li data-thumb="https://www.fewo-graf-karlshagen.de/images/knurrhahn/thumbs/zim_s_238842_013.jpg"> 
                        <img src="https://www.fewo-graf-karlshagen.de/images/knurrhahn/site/obj_full_91963_008.jpg" />
                         </li>
                     <li data-thumb="https://www.fewo-graf-karlshagen.de/images/knurrhahn/thumbs/zim_s_238842_011.jpg"> 
                        <img src="https://www.fewo-graf-karlshagen.de/images/knurrhahn/site/zim_full_238842_011.jpg" />
                         </li>
                     <li data-thumb="https://www.fewo-graf-karlshagen.de/images/knurrhahn/thumbs/obj_91963_007.jpg"> 
                        <img src="https://www.fewo-graf-karlshagen.de/images/knurrhahn/site/obj_full_91963_007.jpg" />
                         </li>
                     <li data-thumb="https://www.fewo-graf-karlshagen.de/images/knurrhahn/thumbs/zim_s_238842_004.jpg"> 
                        <img src="https://www.fewo-graf-karlshagen.de/images/knurrhahn/site/zim_full_238842_004.jpg" />
                         </li>
                </ul>
                
            </div>
            </div>
            <div class="col-lg-3 pl-lg-1 abou-right-w3layuts mt-lg-0 mt-5">
            <ul class="list-group">
                <li class="list-group-item"><span class="fa fa-expand"></span> 33-  50 m²</li>
                <li class="list-group-item"> <span class="fa fa-users"></span> max. 4 Pers</li>
                <li class="list-group-item" ><span class="fa fa-coffee"></span> Küchenzeile</li>
                <li class="list-group-item"><span class="fa fa-bed"></span> 1 Schlafzimmer</li>
                <li class="list-group-item"><span class="fa fa-shower"></span> 1 Bad mit Dusche</li> 
                <li class="list-group-item"><span class="fa fa-glass"></span> 1 Terrassen</li>
                </ul>
                </div>
                </div>
    </div>
  </div>
</div>
</section>

</body>

Ответ №1:

Не назначайте глобальные переменные в DOM, вместо этого сохраняйте их в функциях. Когда я получил аналогичную ошибку, вот как я решил.