Anchor Links Not Working For Tab Structure

2 replies·opened Apr 18, 2017
L
lautrackApr 18, 2017
<div class="tabs tabs-bordered clearfix" id="tab">

						

							<ul class="tab-nav clearfix">
								
								<li><a href="#tabs1"><i class="icon-leaf"></i> Annuals and Perennials</a></li>
								<li><a href="#tabs2"><i class="icon-leaf"></i> Contract Growers</a></li>
								<li><a href="#tabs3"><i class="icon-leaf"></i> Young Plant Growers</a></li>
								<li><a href="#tabs4"><i class="icon-leaf"></i> Trees and Shrubs</a></li>
								<li><a href="#tabs5"><i class="icon-leaf"></i> Crops</a></li>
							</ul>

						<div class="tab-container">

						

							<div class="tab-content clearfix" id="tabs1">
								<h3>Ornamental Finished Growers</h3>
								<img class="alignright img-responsive hidden-xs" src="images/landing/responsive.png" alt="">
							<ul class="iconlist iconlist-color nobottommargin">
								<li><i class="icon-caret-right"></i>Easy order entry with sales order imports &#047; mass change &#047; EDI</li>
								<li><i class="icon-caret-right"></i>Space management</li>
                                <li><i class="icon-caret-right"></i>Pay by Scan</li>
								<li><i class="icon-caret-right"></i>Logistics interfaces for route planning</li>
                                <li><i class="icon-caret-right"></i>Load and staging diagrams</li>
                                <li><i class="icon-caret-right"></i>Specialized item attributes &#040;variety, genus, color, etc.&#041;</li>
                                <li><i class="icon-caret-right"></i>Cart configurations</li>
                                <li><i class="icon-caret-right"></i>DemandLink integration</li>
							</ul>
							</div>

							<div class="tab-content clearfix" id="tabs2">
								<h3>Contract Growers</h3>
								<img class="alignright img-responsive hidden-xs" src="images/grower_vertical_contract.jpg" alt="">
								<ul class="iconlist iconlist-color nobottommargin">
								<li><i class="icon-caret-right"></i>Integrated information</li>
								<li><i class="icon-caret-right"></i>Accurate costing and inventory</li>
                                <li><i class="icon-caret-right"></i>Web-native platform</li>
								<li><i class="icon-caret-right"></i>Production scheduling</li>
                                <li><i class="icon-caret-right"></i>Grow cycle management</li>
                                <li><i class="icon-caret-right"></i>Specialized item attributes &#040;variety, genus, color, etc.&#041;</li>
                                <li><i class="icon-caret-right"></i>Chemical traceability and tracking</li>
                                <li><i class="icon-caret-right"></i>Ability to communicate crop status with customers</li>
							</ul>
							</div>
							
							<div class="tab-content clearfix" id="tabs3">
								<h3>Young Plants</h3>
								<img class="alignright img-responsive hidden-xs" src="images/grower_vertical_young_plant.jpg" alt="">
								<ul class="iconlist iconlist-color nobottommargin">
								<li><i class="icon-caret-right"></i>Integrated information</li>
								<li><i class="icon-caret-right"></i>Accurate costing and inventory</li>
                                <li><i class="icon-caret-right"></i>Broker XML integration for EDI</li>
								<li><i class="icon-caret-right"></i>Web-native platform</li>
                                <li><i class="icon-caret-right"></i>Production scheduling</li>
                                <li><i class="icon-caret-right"></i>Space management</li>
                                <li><i class="icon-caret-right"></i>Grow cycle management</li>
                                <li><i class="icon-caret-right"></i>Specialized item attributes &#040;variety, genus, color, etc.&#041;</li>
                                <li><i class="icon-caret-right"></i>Cart configurations</li>
                                <li><i class="icon-caret-right"></i>Chemical traceability and tracking</li>
							</ul> 
							</div>

							<div class="tab-content clearfix" id="tabs4">
								<h3>Trees and Shrubs</h3>
								<img class="alignright img-responsive hidden-xs" src="images/grower_vertical_shrubs.jpg" alt="">
								<ul class="iconlist iconlist-color nobottommargin">
								<li><i class="icon-caret-right"></i>Integrated information</li>
								<li><i class="icon-caret-right"></i>Accurate costing and inventory</li>
                                <li><i class="icon-caret-right"></i>Web-native platform</li>
                                <li><i class="icon-caret-right"></i>Production scheduling supporting long grow cycles</li>
                                <li><i class="icon-caret-right"></i>Space management</li>
                                <li><i class="icon-caret-right"></i>Logistics interfaces for route planning</li>
                                <li><i class="icon-caret-right"></i>Load and staging diagrams</li>
                                <li><i class="icon-caret-right"></i>Specialized item attributes &#040;variety, genus, color, etc.&#041;</li>
                                <li><i class="icon-caret-right"></i>BOL with multiple units of measure</li>
                                <li><i class="icon-caret-right"></i>Chemical traceability and tracking</li>
							</ul>
							
							</div>
							<div class="tab-content clearfix" id="tabs5">
								<h3>Crops</h3>
								<img class="alignright img-responsive hidden-xs" src="images/grower_vertical_crop.jpg" alt="">
								<ul class="iconlist iconlist-color nobottommargin">
								<li><i class="icon-caret-right"></i>Integrated information</li>
								<li><i class="icon-caret-right"></i>Accurate costing and inventory</li>
                                <li><i class="icon-caret-right"></i>Easy order entry with sales order imports &#047; mass change &#047; EDI</li>
                                <li><i class="icon-caret-right"></i>Web-native platform</li>
                                <li><i class="icon-caret-right"></i>Production scheduling</li>
                                <li><i class="icon-caret-right"></i>Pay by Scan</li>
                                <li><i class="icon-caret-right"></i>Logistics interfaces for route planning</li>
                                <li><i class="icon-caret-right"></i>Specialized item attributes &#040;variety, genus, color, etc.&#041;</li>
                                <li><i class="icon-caret-right"></i>BOL with multiple units of measure</li>
                                <li><i class="icon-caret-right"></i>Chemical traceability and tracking</li>
                                <li><i class="icon-caret-right"></i>Distribution center and 3PL shipping support</li>
                                <li><i class="icon-caret-right"></i>Crop grading and settlement</li>
                                <li><i class="icon-caret-right"></i>Lot and serialization traceability for recall</li>
								</ul>
							</div>

					</div>
	
			</div>
L
lautrackApr 18, 2017

I currently have this tab structure and I am linking to the page like this but it is not opening the 5th tab. Why is this?

<a href="industries.html#tabs5">

D
daihloApr 18, 2017

This behaviour relies on javascript, you need to provide a live URL demonstrating the problem.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard