Bootstrap 4, показывающий объявления Amazon Affiliate на разных вкладках не работает

Question

Я добавил 6 разных «продуктов», которые я хочу продать на своем сайте. Я использую ASP.NET MVC Core (последний) и используя вкладки Twitter Bootstrap 4.

Первая вкладка показывает контент/товары просто отлично (поскольку это активная вкладка по умолчанию), но когда я нажимаю на другую вкладку на моей странице, ни один из содержимого/продуктов не отображается. Я проверил, что ссылка/сценарии объявлений Amazon находится в источнике страницы и настроена точно так же, как и тот, который работает.

Я правильно настроил это или эти объявления спроектированы так, чтобы они не отображались в этом формате?

Вот сайт: http://www.wrestlestat.com/shop/main

Вот мой cshtml:

<div class="row"> 
    <div class="col-xs-12"> 
     <div class="card"> 
      <div class="card-header pt-2 bold-red-on-black"> 
       <h2>@Model.Header</h2> 
      </div> 
      <div class="row"> 
       <div class="card-block"> 
        <div class="col-xs-12"> 
         <div class="row"> 
          <div class="col-xs-12"> 
           <ul class="nav nav-tabs mt-2" role="tablist"> 
            <li class="nav-item"> 
             <a class="nav-link active" data-toggle="tab" href="#shirts" role="tab">Shirts</a> 
            </li> 
            <li class="nav-item"> 
             <a class="nav-link" data-toggle="tab" href="#sweatshirts" role="tab">Sweatshirts</a> 
            </li> 
            <li class="nav-item"> 
             <a class="nav-link" data-toggle="tab" href="#shoes" role="tab">Shoes</a> 
            </li> 
            <li class="nav-item"> 
             <a class="nav-link" data-toggle="tab" href="#headgear" role="tab">Headgear</a> 
            </li> 
            <li class="nav-item"> 
             <a class="nav-link" data-toggle="tab" href="#mats" role="tab">Mats</a> 
            </li> 
            <li class="nav-item"> 
             <a class="nav-link" data-toggle="tab" href="#apparel" role="tab">Apparel</a> 
            </li> 
           </ul> 
           <div class="tab-content"> 
            <div class="tab-pane fade in active" id="shirts" role="tabpanel"> 
             <script type="text/javascript"> 
              amzn_assoc_placement = "adunit0"; 
              amzn_assoc_search_bar = "true"; 
              amzn_assoc_tracking_id = "wrestlestat-20"; 
              amzn_assoc_search_bar_position = "top"; 
              amzn_assoc_ad_mode = "search"; 
              amzn_assoc_ad_type = "smart"; 
              amzn_assoc_marketplace = "amazon"; 
              amzn_assoc_region = "US"; 
              amzn_assoc_title = "Shop Related Products"; 
              amzn_assoc_default_search_phrase = "wrestling shirts"; 
              amzn_assoc_default_category = "All"; 
              amzn_assoc_linkid = "1652714d098550932e3244e6b68c660c"; 
             </script> 
             <script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"></script> 
            </div> 
            <div class="tab-pane fade" id="sweatshirts" role="tabpanel"> 
             <script type="text/javascript"> 
              amzn_assoc_placement = "adunit0"; 
              amzn_assoc_search_bar = "true"; 
              amzn_assoc_tracking_id = "wrestlestat-20"; 
              amzn_assoc_search_bar_position = "top"; 
              amzn_assoc_ad_mode = "search"; 
              amzn_assoc_ad_type = "smart"; 
              amzn_assoc_marketplace = "amazon"; 
              amzn_assoc_region = "US"; 
              amzn_assoc_title = "Shop Related Products"; 
              amzn_assoc_default_search_phrase = "wrestling sweatshirts"; 
              amzn_assoc_default_category = "All"; 
              amzn_assoc_linkid = "d8fa72ed2145882d2d2b477b692dc3a7"; 
             </script> 
             <script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"></script> 
            </div> 
            <div class="tab-pane fade" id="shoes" role="tabpanel"> 
             <script type="text/javascript"> 
              amzn_assoc_placement = "adunit0"; 
              amzn_assoc_search_bar = "true"; 
              amzn_assoc_tracking_id = "wrestlestat-20"; 
              amzn_assoc_search_bar_position = "top"; 
              amzn_assoc_ad_mode = "search"; 
              amzn_assoc_ad_type = "smart"; 
              amzn_assoc_marketplace = "amazon"; 
              amzn_assoc_region = "US"; 
              amzn_assoc_title = "Shop Related Products"; 
              amzn_assoc_default_search_phrase = "wrestling shoes"; 
              amzn_assoc_default_category = "All"; 
              amzn_assoc_linkid = "64c7df1d0b41ea3f0ec8392345eadbf2"; 
             </script> 
             <script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"></script> 
            </div> 
            <div class="tab-pane fade" id="headgear" role="tabpanel"> 
             <script type="text/javascript"> 
              amzn_assoc_placement = "adunit0"; 
              amzn_assoc_search_bar = "true"; 
              amzn_assoc_tracking_id = "wrestlestat-20"; 
              amzn_assoc_search_bar_position = "top"; 
              amzn_assoc_ad_mode = "search"; 
              amzn_assoc_ad_type = "smart"; 
              amzn_assoc_marketplace = "amazon"; 
              amzn_assoc_region = "US"; 
              amzn_assoc_title = "Shop Related Products"; 
              amzn_assoc_default_search_phrase = "wrestling headgear"; 
              amzn_assoc_default_category = "All"; 
              amzn_assoc_linkid = "50f3bdaf710b4d98ca80ef0fd85ffc89"; 
             </script> 
             <script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"></script> 
            </div> 
            <div class="tab-pane fade" id="mats" role="tabpanel"> 
             <script type="text/javascript"> 
              amzn_assoc_placement = "adunit0"; 
              amzn_assoc_search_bar = "true"; 
              amzn_assoc_tracking_id = "wrestlestat-20"; 
              amzn_assoc_search_bar_position = "top"; 
              amzn_assoc_ad_mode = "search"; 
              amzn_assoc_ad_type = "smart"; 
              amzn_assoc_marketplace = "amazon"; 
              amzn_assoc_region = "US"; 
              amzn_assoc_title = "Shop Related Products"; 
              amzn_assoc_default_search_phrase = "wrestling mats"; 
              amzn_assoc_default_category = "All"; 
              amzn_assoc_linkid = "2b7b352bfa7628a3cdfe070ab4e0c338"; 
             </script> 
             <script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"></script> 
            </div> 
            <div class="tab-pane fade" id="apparel" role="tabpanel"> 
             <script type="text/javascript"> 
              amzn_assoc_placement = "adunit0"; 
              amzn_assoc_search_bar = "true"; 
              amzn_assoc_tracking_id = "wrestlestat-20"; 
              amzn_assoc_search_bar_position = "top"; 
              amzn_assoc_ad_mode = "search"; 
              amzn_assoc_ad_type = "smart"; 
              amzn_assoc_marketplace = "amazon"; 
              amzn_assoc_region = "US"; 
              amzn_assoc_title = "Shop Related Products"; 
              amzn_assoc_default_search_phrase = "wrestling apparel"; 
              amzn_assoc_default_category = "All"; 
              amzn_assoc_linkid = "276b7bc6cbaec842ec7997d866ef94ac"; 
             </script> 
             <script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"></script> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Я не знаю, почему это происходит. Но в моем случае я сделал это так.

Я добавил активный класс ко всем вкладкам и после визуализации вкладок. Я удалил все классы активов , за исключением фактической активной вкладки (в вашем случае, например, рубашки).

проблема с вкладками. если они неактивны. они не показывают данные или не извлекают. что странно.

HTML

 <ul class="nav nav-tabs mt-2" role="tablist"> 
     <li class="nav-item"> 
      <a class="nav-link active" data-toggle="tab" href="#shirts" role="tab">Shirts</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link active remove-after-render" data-toggle="tab" href="#sweatshirts" role="tab">Sweatshirts</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link active remove-after-render" data-toggle="tab" href="#shoes" role="tab">Shoes</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link active remove-after-render" data-toggle="tab" href="#headgear" role="tab">Headgear</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link active remove-after-render" data-toggle="tab" href="#mats" role="tab">Mats</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link active remove-after-render" data-toggle="tab" href="#apparel" role="tab">Apparel</a> 
     </li> 
     </ul> 

JS

$('.remove-after-render').removeClass('active'); 

Еще одна вещь, которую я заметил в вашем коде. В соответствии с Bootstrap активный класс должен быть на li элемент не на a тег. Поэтому постарайтесь сделать то же самое и на элементе li.

Желаю вам всего наилучшего.