Looking to transform these tabs into a fixed Bootstrap navigation bar at the bottom. Despite my efforts, they remain fixed at the top. How can I achieve this layout with the elements at my disposal? Thank you. You can view the incorrect page here. Tab "One" has its own ul but the content does not display correctly. The desired outcome is for Tab One to show "page 1" and "page 2".
The HTML body code looks like this:
$(document).ready(function() {
$("#content").find("[id^='tab']").hide(); // Hide all content
$("#tabs li:first").attr("id","current"); // Activate the first tab
$("#content #tab1").fadeIn(); // Show first tab's content
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
return;
}
else{
$("#content").find("[id^='tab']").hide(); // Hide all content
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$('#' + $(this).attr('name')).fadeIn(); // Show content for the current tab
}
});
});#tabs {
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#tabs li {
float: left;
margin: 0 .5em 0 0;
}
#tabs a {
position: relative;
background: #ddd;
background-image: linear-gradient(to bottom, #fff, #ddd);
padding: .7em 3.5em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
border-radius: 5px 0 0 0;
box-shadow: 0 2px 2px rgba(0,0,0,.4);
}
#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after {
background: #fff;
}
#tabs a:focus {
outline: 0;
}
#tabs a::after {
content:'';
position:absolute;
z-index: 1;
top: 0;
right: -.5em;
bottom: 0;
width: 1em;
background: #ddd;
background-image: linear-gradient(to bottom, #fff, #ddd);
box-shadow: 2px 2px 2px rgba(0,0,0,.4);
transform: skew(10deg);
border-radius: 0 5px 0 0;
}
#tabs #current a,
#tabs #current a::after {
background: #fff;
z-index: 3;
}
#content {
background: #fff;
padding: 2em;
height: 220px;
position: relative;
z-index: 2;
border-radius: 0 5px 5px 5px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<nav class="navbar navbar-inverse fixed-bottom">
<nav>
<div>
<ul class="nav navbar-nav" id="tabs">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown"><a href="#" name="tab1">One</a>
<ul class="dropdown-menu">
<li><a href="#">page 1</a></li>
<li><a href="#">page 2</a></li>
</ul>
</li>
<li><a href="#" name="tab2">Two</a></li>
<li><a href="#" name="tab3">Three</a></li>
<li><a href="#" name="tab4">Four</a></li>
</ul>
</div>
</nav>