Bootstrap 4 在不同的选项卡上显示 Amazon Affiliate 广告不起作用
Bootstrap 4 showing Amazon Affiliate ads on different tabs not working
我添加了 6 种不同的 "products" 我想在我的网站上出售。我正在使用 ASP.NET MVC Core（最新）并利用 Twitter Bootstrap 4 的选项卡。
第一个选项卡显示 content/products 很好（因为它是默认的活动选项卡），但是当我单击页面上的其他选项卡时，[=24= 的 none ] 出现。我已验证亚马逊广告 link/scripts 位于页面源代码中，并且配置与确实有效的广告完全相同。
我的设置是否正确，或者这些广告是否设计为无法以此类格式显示？
这是网站：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>
我不知道为什么会这样。但就我而言，我是这样做的。
我在所有选项卡中添加了活动 class 并在呈现选项卡之后。我删除了所有活动 classes 除了实际活动标签（在你的情况下，例如衬衫）。
它的标签问题。如果他们不活跃。他们不显示数据或检索。这很奇怪。
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 活动 class 应该在 li 元素上而不是在 a 标签上。所以也尝试在 li 元素上做同样的事情。
祝你一切顺利。
我添加了 6 种不同的 "products" 我想在我的网站上出售。我正在使用 ASP.NET MVC Core（最新）并利用 Twitter Bootstrap 4 的选项卡。
第一个选项卡显示 content/products 很好（因为它是默认的活动选项卡），但是当我单击页面上的其他选项卡时，[=24= 的 none ] 出现。我已验证亚马逊广告 link/scripts 位于页面源代码中，并且配置与确实有效的广告完全相同。
我的设置是否正确，或者这些广告是否设计为无法以此类格式显示？
这是网站：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>
我不知道为什么会这样。但就我而言，我是这样做的。
我在所有选项卡中添加了活动 class 并在呈现选项卡之后。我删除了所有活动 classes 除了实际活动标签（在你的情况下，例如衬衫）。
它的标签问题。如果他们不活跃。他们不显示数据或检索。这很奇怪。
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 活动 class 应该在 li 元素上而不是在 a 标签上。所以也尝试在 li 元素上做同样的事情。
祝你一切顺利。