JQuery Tabs

Developer
Marty Powell
Size
4,420 Kb
Views
16,192
  1. JQuery Tabs Previews
  2. JQuery Tabs HTML Codes
  3. JQuery Tabs CSS Codes
  4. JQuery Tabs JS Codes

How do I make an jquery tabs?

Built to replicate the tabbing going on here, http://www.baltimorecountymd.gov/Agencies/publicworks/SnowFighter/. What is a jquery tabs? How do you make a jquery tabs? This script and codes were developed by Marty Powell on 15 September 2022, Thursday.

JQuery Tabs Previews
IQ Test

JQuery Tabs - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery Tabs</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>Bacon ipsum dolor sit amet kevin jerky flank cow meatball. Ball tip tongue prosciutto ham hock chuck kevin ham boudin porchetta sausage tail pork belly. Tongue t-bone prosciutto shank ham hock, beef ribs brisket. Corned beef brisket biltong kevin. Biltong shank brisket, sirloin tail ham hock chicken bacon flank chuck short ribs turducken kevin rump.</p>
<p>Bacon ipsum dolor sit amet kevin jerky flank cow meatball. Ball tip tongue prosciutto ham hock chuck kevin ham boudin porchetta sausage tail pork belly. Tongue t-bone prosciutto shank ham hock, beef ribs brisket. Corned beef brisket biltong kevin. Biltong shank brisket, sirloin tail ham hock chicken bacon flank chuck short ribs turducken kevin rump.</p>
<ul class="tabs js-tabs"> <li><a class="active-tab" href="#map">Tab 1</a></li> <li><a href="#list">Tab 2</a></li> <li><a href="#flexible">Tab 3</a></li>
</ul>
<div class="js-tabs-container"> <div id="map" class="js-tab"> <p>Content Goes Here</p> </div> <div id="list" class="js-tab"> <p>List Goes Here</p> </div> <div id="flexible" class="js-tab"> <p>That was simple.</p> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery Tabs - Script Codes CSS Codes

/*Variables*/
.tabs { background: #e46418; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U0NjQxOCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmY4MjM2Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZTQ2NDE4Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e46418), color-stop(50%, #ff8236), color-stop(100%, #e46418)); background-image: -moz-linear-gradient(#e46418, #ff8236, #e46418); background-image: -webkit-linear-gradient(#e46418, #ff8236, #e46418); background-image: linear-gradient(#e46418, #ff8236, #e46418); padding: 0 10px; padding-top: 5px;
}
.tabs > li { display: inline-block;
}
.tabs > li > a { color: white; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; padding: 5px 50px; text-decoration: none;
}
.tabs > li > a:hover { background: #ff8d00;
}
.tabs > li > a.active-tab { background: white; border: 1px solid #cacaca; border-bottom: none; color: #e46418; cursor: default; font-weight: bold;
}

JQuery Tabs - Script Codes JS Codes

var Tabs = (function ($) { var Tabs = function (elm) { this.$elm = $(elm); this.activeClass = 'active-tab'; this.tabContainerClass = 'js-tab'; this.defaultTab = null; this.$elm.on('click', 'li a', function (e) { e.preventDefault(); showTab(this); }); //Shows the Cotainer of that we want to see based on id this.showContainer = function (id) { hideContainers(); showTab(id); }; /*Private properties and methods*/ var tab = this, //Add the active class to element addActive = function (href) { removeActive(); var els = document.getElementsByTagName("a"); //Get a link by href for (var i = 0, l = els.length; i < l; i++) { var el = els[i]; if (getHash(el.href) === href) { el.className += tab.activeClass; break; } } }, //Hide all tab containers hideContainers = function () { var containers = document.getElementsByClassName(tab.tabContainerClass); //Loop through each object and hide it for (var i = containers.length - 1; i >= 0; i--) { containers[i].style.display = "none"; } }, //Remove all active links removeActive = function () { var elements = document.getElementsByClassName(tab.activeClass); for (var i = elements.length - 1; i >= 0; i--) { elements[i].className = elements[i].className.replace(new RegExp('(?:^|\\s)' + tab.activeClass + '(?!\\S)'), ''); } }, //All steps to show a tab and hide the active tab showTab = function (_this) { var divToShow, $this = $(_this); //If _this is a string we specified the id in a string and want to keep it the way it is if (_this && typeof _this === "string") { divToShow = _this; } else if (_this && typeof _this === "object") { //_this will be equal to the tab-link element you selected divToShow = getHash(_this.href); } else { //This is null, show the first tab in this case divToShow = $('li a', tab.$elm).attr('href').replace('#', ''); } //Add active class to the clicked link addActive(divToShow); //Hide All Containers before we show the one we want hideContainers(); //Show the desired container document.getElementById(divToShow).style.display = "block"; }; }; Tabs.prototype.Init = function (defaultValue) { if (defaultValue) { this.defaultTab = defaultValue; this.showContainer(this.defaultTab); } else { var url = window.location.href, hash = getHash(url); //If the page is pointing to a anchor element on the page, go to that if (hash) { this.showContainer(hash); } //Page is loading without a specified value so go to the default tab else { this.showContainer(this.defaultTab); } } }; //Private Utility Methods var getHash = function (url) { if (url && url.indexOf("#")) { var idx = url.indexOf("#"); return idx != -1 ? url.substring(idx + 1) : ""; } return null; }; return Tabs;
})(jQuery);
var closureTabs = new Tabs('.js-tabs');
closureTabs.Init();
JQuery Tabs - Script Codes
JQuery Tabs - Script Codes
Home Page Home
Developer Marty Powell
Username martypowell
Uploaded September 15, 2022
Rating 3
Size 4,420 Kb
Views 16,192
Do you need developer help for JQuery Tabs?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Marty Powell (martypowell) Script Codes
Name
Flickr API Example
Animated Skip Nav
Slick Carousel Prototype
About Me
Donation Bar
Font Awesome Social Icon List
News Snippet
CSS Animation Grayscale to Color Photo
Randon Image Slider
Circle Logo
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!