1
У меня есть две отдельные вкладки, которые меняются при нажатии или в течение 5 секунд.Bootstrap вертикальные вкладки не меняются автоматически
Коробка слева работает отлично. Однако поле справа изменяет активный, но не контент.
Вот HTML: Box слева:
<div class="media">
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked">
<li class=""><a href="#tab1" data-toggle="tab" class="analistic-01">Architect</a></li>
<li class=""><a href="#tab2" data-toggle="tab" class="analistic-03">AIA</a></li>
<li class=""><a href="#tab3" data-toggle="tab" class="tehnical">IRS </a></li>
<li class=""><a href="#tab4" data-toggle="tab" class="tehnical">AKIN GUMP</a></li>
<li class=""><a href="#tab5" data-toggle="tab" class="tehnical">PWC</a></li>
<li class=""><a href="#tab6" data-toggle="tab" class="tehnical">EPA</a></li>
</ul>
</div>
<div class="parrent media-body">
<div class="tab-content">
<div class="tab-pane fade" id="tab1">
<div class="media">
<div class="pull-left boxImg">
<a href="http://www.architectmagazine.com/awards/r-d-awards/award-green-zip-tape_o"><img class="img-responsive" src="images/Awards/R&D.png"></a>
<a href="http://www.architectmagazine.com/awards/r-d-awards/award-green-zip-tape_o">Click for Award</a>
</div>
<div class="media-body">
<h2>Architect Magazine</h2>
<p>It’s hard to get simpler in conception and execution than Green-Zip Tape. The product is a substitute for the joint-compound tape that has been used between gypsum board panels since the introduction of prefabricated plasterboard in the early 1930s. The product impressed all three jurors.</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab2">
<div class="media">
<div class="pull-left boxImg">
<a href="http://info.aia.org/aiarchitect/thisweek07/1005/1005n_epa.htm"><img class="img-responsive" src="images/Awards/AIA.png"></a>
<a href="http://info.aia.org/aiarchitect/thisweek07/1005/1005n_epa.htm">Click for Award</a>
</div>
<div class="media-body">
<h2>AIA Awards</h2>
<p>This patented demountable tape provides an alternative method for hanging sheetrock for future de-construction and reuse.
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab3">
<div class="media">
<div class="pull-left boxImg">
<a href="https://www.irs.gov/pub/irs-wd/1404001.pdf"><img class="img-responsive" src="images/Awards/IRS.png" style="margin-top:-30px;"></a>
<a href="https://www.irs.gov/pub/irs-wd/1404001.pdf" style="margin-left: 20px;">Click for PLR</a>
</div>
<div class="media-body">
<h2>IRS PLR</h2>
<p>Taxpayer's Zip type partitions installed within the Owned Property and Leased Property are included in asset class 57.0 of Rev. Proc. 87-56 for purposes of § 168.
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab4">
<div class="media">
<div class="pull-left boxImg">
<a href="https://www.akingump.com/en/news-insights/david-burton-examines-irs-private-letter-ruling-on-drywall.html"><img class="img-responsive" src="images/Awards/AkinGump.png"></a>
<a href="https://www.akingump.com/en/news-insights/david-burton-examines-irs-private-letter-ruling-on-drywall.html">Click for Article</a>
</div>
<div class="media-body">
<h2>Akin Gump Article</h2>
<p style="font-size: 12px;">The article analyzes an IRS ruling that says that zip system drywall is eligible for more favorable depreciation than conventional system drywall, despite the fact that each serves the same purpose and has a comparable cost. Burton also looks at the opportunities this creates for real estate developers and the implications for certain nontraditional real estate investment trusts.
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab5">
<div class="media">
<div class="pull-left boxImg">
<a href="http://www.pwc.com/us/en/tax-accounting-services/newsletters/accounting-methods/new-rulings-provide-guidance-tax-accounting-method-issues.html"><img class="img-responsive" src="images/Awards/PWC.png"></a>
<a href="http://www.pwc.com/us/en/tax-accounting-services/newsletters/accounting-methods/new-rulings-provide-guidance-tax-accounting-method-issues.html">Click for Article</a>
</div>
<div class="media-body">
<h2>PWC Article</h2>
<p style="font-size: 12px;">IRS rules on the depreciation classification of certain interior, non-load bearing partitions
The IRS, in PLR 201404001, ruled that zip-type partitions installed within owned and leased property must be included in asset class 57.0 of Rev. Proc. 87-56 under Section 168, and that conventional drywall partitions are classified as non-residential real property under Section 168(e)(2)(B).
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab6">
<div class="media">
<div class="pull-left boxImg">
<a href="http://www3.epa.gov/region9/waste/solid/construction/lifecyclebuilding/#win"><img class="img-responsive" src="images/Awards/US.png" style="margin-top: -30px;"></a>
<a href="http://www3.epa.gov/region9/waste/solid/construction/lifecyclebuilding/#win">Click for Award</a>
</div>
<div class="media-body">
<h2>EPA Awards</h2>
<p>Winner: Green-Zip-TapeTM Demountable Tape Drywall tape attachment system to support easy deconstruction and reuse
</p>
</div>
</div>
</div>
</div>
<!--/.tab-content-->
</div>
<!--/.media-body-->
</div>
<!--/.media-->
Box справа:
<div class="media">
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked nav-two">
<li class=""><a href="#set1" data-toggle="tab" class="analistic-01">Marek</a></li>
<li class=""><a href="#set2" data-toggle="tab" class="analistic-02">Ozarks Bank</a></li>
<li class=""><a href="#set3" data-toggle="tab" class="tehnical">CBRE </a></li>
<li class=""><a href="#set4" data-toggle="tab" class="tehnical">Habitat</a></li>
<li class=""><a href="#set5" data-toggle="tab" class="tehnical">Huffman</a></li>
<li class=""><a href="#set6" data-toggle="tab" class="tehnical">Holiday</a></li>
</ul>
</div>
<div class="parrent media-body">
<div class="tab-content">
<div class="tab-pane fade" id="set1">
<div class="media">
<div class="pull-left boxImg">
<a href="Ref/Marek.pdf"><img class="img-responsive" src="images/Referals/MarekBrothers.jpg"></a>
<a href="Ref/Marek.pdf">Click for Referance</a>
</div>
<div class="media-body">
<h2>Marek</h2>
<p>We recently built our new 50,000 SF headquarters building and used the Green-Zip Partition System everywhere. To me, it’s a simple solution and one that everyone should take advantage of!
<br>
-<b>R. Stan Marek</b>/Chairman
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="set2">
<div class="media">
<div class="pull-left boxImg" style="margin-top: 20px;">
<a href="Ref/Ozarks.pdf"><img class="img-responsive" src="images/Referals/BankOfTheOzarks.jpg" style="margin-top: 30px;"></a>
<a href="Ref/Ozarks.pdf">Click for Referance</a>
</div>
<div class="media-body">
<h2>Bank Of The Ozarks</h2>
<p>….we now have a built in mechanism for remodeling that should be less expensive, less time consuming, and most importantly, environmentally friendly. <br>
-<b>Mark D. Ross</b>/Vice-Chairman & COO
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="set3">
<div class="media">
<div class="pull-left boxImg">
<a href="Ref/CBRE.pdf"><img class="img-responsive" src="images/Referals/CBRE.jpg"></a>
<a href="Ref/CBRE.pdf">Click for Referance</a>
</div>
<div class="media-body">
<h2>CBRE</h2>
<p>….there is no reason not to consider Green Zip Tape as shorter-life property for any tax payer especially based on the design intent, which was originally based on the reusable concept.
<br>
-<b>Matt Rader</b>/National Managing Director
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="set4">
<div class="media">
<div class="pull-left boxImg">
<a href="Ref/Habitat.pdf"><img class="img-responsive" src="images/Referals/Habitat.jpg"></a>
<a href="Ref/Habitat.pdf">Click for Referance</a>
</div>
<div class="media-body">
<h2>Habitat for Humanity</h2>
<p>I am very excited about the opportunity to help others have affordable and decent housing, while also keeping more products that can be reused from piling up in a local landfill. Now that is a winning combination!
<br>
-<b>Ron Collins</b>/Vice President of ReStores
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="set5">
<div class="media">
<div class="pull-left boxImg">
<a href="Ref/Huffman.pdf"><img class="img-responsive" src="images/Referals/Huffman.jpg"></a>
<a href="Ref/Huffman.pdf">Click for Referance</a>
</div>
<div class="media-body">
<h2>Huffman Drywall</h2>
<p>In addition to the sustainable benefits, the financial benefits associated with accelerated depreciation are valuable to me as an owner, and could potentially add to the building’s value in the event of a sale.
<br>
-<b>Brandon Huffman</b>/President
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="set6">
<div class="media">
<div class="pull-left boxImg">
<a href="Ref/Holiday.pdf"><img class="img-responsive" src="images/Referals/Holiday.jpg"></a>
<a href="Ref/Holiday.pdf">Click for Referance</a>
</div>
<div class="media-body">
<h2>Holiday Inn</h2>
<p>We found that the system will be acceptable for use in Holiday Inn, Holiday Inn Express hotels, and Staybridge Suites hotels. Congratulations.
<br>
-<b>Scott Bruce</b>
</p>
</div>
</div>
</div>
</div>
<!--/.tab-content-->
</div>
<!--/.media-body-->
</div>
<!--/.media-->
Вот это JavaScript:
var cycle = {
onReady: function() {
$(".nav-stacked li:first").addClass("active in");
$("#tab1").addClass("active in");
setInterval(function() {
var $navStacked = $("li.active");
var tabContent = $("li.active a").attr("href");
if ($navStacked.is(".nav-stacked li:last-child")) {
$navStacked.removeClass("active in");
$(".nav-stacked li:first").addClass("active in");
$("div " + tabContent).removeClass("active in");
$("div#tab1").addClass("active in");
} else {
$navStacked.removeClass("active in").next().addClass("active in");
$("div " + tabContent).removeClass("active in").next().addClass("active in");
}
}, 5000);
}
};
$(document).ready(cycle.onReady);
var cycle2 = {
onReady: function() {
$(".nav-two li:first").addClass("active in");
$("#set1").addClass("active in");
setInterval2(function() {
var $navStacked2 = $("li.active");
var tabContent2 = $("li.active a").attr("href");
if ($navStacked2.is(".nav-two li:last-child")) {
$navStacked2.removeClass("active in");
$(".nav-two li:first").addClass("active in");
$("div " + tabContent2).removeClass("active in");
$("div#set1").addClass("active in");
} else {
$navStacked2.removeClass("active in").next().addClass("active in");
$("div " + tabContent2).removeClass("active in").next().addClass("active in");
}
}, 5000);
}
};
$(document).ready(cycle2.onReady);
цикл контролирует левый флажок, цикл 2 должен управлять правом. Спасибо за помощь!
Вот jsfiddle Fiddle
сделать [скрипку] (https://jsfiddle.net/) – Raviteja
https://jsfiddle.net/DTcHh/16660/ – Charles
цель не совпадает –