Develop Reference

How to make a tab system with jquery in this project?

I'm trying to create a tab system but I can not hide and show the tabs.
I can not find a way to make it work, this is my code.
$(function() {
$(".aba:not(:first)").hide();
$("a").click(function() {
var div = $(this).attr("href");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="left-side">
<div class="services">
<ul class="clearfix">
<li><a class="blink" href="#a_nota">NOTA</a></li>
<li><a class="blink" href="#a_frequencia">FREQUÊNCIA</a></li>
<li><a class="blink" href="#a_grade">GRADE CURRICULAR</a></li>
<li><a class="blink" href="#a_financeiro">FINANCEIRO</a></li>
</ul>
<div class="contato">
<div class="tell">
<img src="icon/phoneicon.png" alt="teste">
<p>Contato: 08000 023 1231</p>
</div>
</div>
</div>
</div>
<div class="right-side">
<div id="a_nota" class="aba">NOTA</div>
<div id="a_frequencia" class="aba">FREQUÊNCIA</div>
<div id="a_grade" class="aba">GRADE</div>
<div id="a_financeiro" class="aba">FINANCEIRO</div>
</div>
</div>

You can do like this, where you set all the tabs to display: none; and then on click add the class active which changes it to display:block !important;
$('a.blink').on('click', function(){
var clicked = $(this).attr('href').replace("#", "");
$('div.aba').each(function(){
if($(this).attr('id') === clicked){
$(this).addClass('active');
}else{
$(this).removeClass('active');
}
});
});
.aba{
display:none;
}
.aba.active{
display:block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="left-side">
<div class="services">
<ul class="clearfix">
<li><a class="blink" href="#a_nota">NOTA</a></li>
<li><a class="blink" href="#a_frequencia">FREQUÊNCIA</a></li>
<li><a class="blink" href="#a_grade">GRADE CURRICULAR</a></li>
<li><a class="blink" href="#a_financeiro">FINANCEIRO</a></li>
</ul>
<div class="contato">
<div class="tell">
<img src="icon/phoneicon.png" alt="teste">
<p>Contato: 08000 023 1231</p>
</div>
</div>
</div>
</div>
<div class="right-side">
<div id="a_nota" class="aba active">NOTA</div>
<div id="a_frequencia" class="aba">FREQUÊNCIA</div>
<div id="a_grade" class="aba">GRADE</div>
<div id="a_financeiro" class="aba">FINANCEIRO</div>
</div>
</div>

You can make it work this way:
jQuery:
$(".aba").not(":first-child").hide();
$(".blink").on("click", function(e) {
e.preventDefault();
var value = $(this).attr("href");
$(".aba").hide();
$(value).fadeIn(500);
});

add class on scroll in bootstrap tabing

i need a small help for add a class on scroll in bootstrap tabbing carousal.
so here is my page url
when i click on any point from tabing like 1,2,3.. active class is adding on tabing on same that is perfect i use this is script
$('#myCarousel').bind('mousewheel', function(e){$(this).carousel('next');});
$('.tab li').on('click', function(){
$('li.active').removeClass('active');
$(this).addClass('active');
});
it is working perfect as class is adding on li.active but i also want .active class on current tab when i scroll in tab container. i have added scroll code and working perfect but need class to add in .tab li when i scroll
here is HTML code as well
<div class="tab">
<div class="container-tab">
<ul class="list-inline nav">
<li data-target="#myCarousel" data-slide-to="0" class="active"> <a href="#">
<div class="round-tab-num"> 1 </div>
<p>Working Smart <small>not harder</small> </p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="1"> <a href="#">
<div class="round-tab-num"> 2 </div>
<p>Working Smart <small>not harder</small> </p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="2"> <a href="#">
<div class="round-tab-num"> 3 </div>
<p>Working Smart <small>not harder</small> </p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="3"> <a href="#">
<div class="round-tab-num"> 4 </div>
<p>Working Smart <small>not harder</small></p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="4"> <a href="#">
<div class="round-tab-num"> 5 </div>
<p>Working Smart <small>not harder</small></p>
</a> </li>
</ul>
<!--The main div for carousel-->
<div id="myCarousel" class="carousel horizantal slide" data-interval="false">
<!-- Sliding images statring here -->
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption">
<h3>test1</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test2</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test3</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test4</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test5</h3>
</div>
</div>
</div>
<!-- Next / Previous controls here -->
<div> </div>
</div>
</div>
</div>
this code is also added
$(document).ready( function() {
$('#myCarousel').carousel({
interval: 4000
});
var clickEvent = false;
$('#myCarousel').on('click', '.container-tab .nav a', function() {
clickEvent = true;
$('.container-tab .nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.container-tab .nav').children().length -1;
var current = $('.container-tab .nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.container-tab .nav li').first().addClass('active');
}
}
clickEvent = false;
});
});

change your code as below simply remove class from currently active li and add active class to next li as below
$('#myCarousel').bind('mousewheel', function(e) {
$(this).carousel('next');
var $currentlyactive =$('li.active');
$currentlyactive.removeClass('active');
$currentlyactive.next().addClass('active');
});
Updated
$(document).ready(function() {
$('.carousel').carousel('pause');
});
$('#myCarousel').bind('mousewheel', function(e){$(this).carousel('next');});
$('.tab li').on('click', function(){
$('li.active').removeClass('active');
$(this).addClass('active');
});
this is the code in your html page remove this all carousel related code has been done in custom.js..

how to display the links in tabs in bootstrap?

i need to display the a.php,b.php,c.php in the tabs tab2,tab3,tab4 respectively i have written the following code but the links a.php,b.php,c.php is not displaying in the tabs tab2,tab3,tab4 respectively instead of that if i click on the tab2 it redirects to the a.php page but i need to display in a tab manner in which if i click the tab2 it should display the a.php in the tab2 respectively what should i change to display the links on the tab ? kindly help me Thanks in advance
<script >
$('#tab2').load('a.php');
$('#tab3').load('b.php');
$('#tab4').load('c.php');
</script>
</head>
<body>
<div class="tabbable" style="margin-bottom: 18px;">
<ul class="nav nav-tabs">
<li class="active">Request Audit</li>
<li class="">Status</li>
<li class="">Settings</li>
<li class="">Help</li>
</ul>
<div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
<div class="tab-pane active" id="tab1">
<p>Placeholder 1</p>
</div>
<div class="tab-pane" id="tab2">
<p>Placeholder 2</p>
</div>
<div class="tab-pane" id="tab3">
<p>Placeholder 3</p>
</div>
<div class="tab-pane" id="tab4">
<p>Placeholder</p>
</div>
</div>
</div>
</body>

You can change the href link by using $("#tab1").attr("href", "#a.php");
$(function(){
$("#tab1").attr("href", "#a");
$("#tab2").attr("href", "#b");
$("#tab3").attr("href", "#c");
$("#tab4").attr("href", "#d");
});
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs-container">
<ul class="tabs-menu">
<li class="current"><a id="tab1" href="#tab-1">Tab 1</a></li>
<li><a id="tab2" href="#tab-2">Tab 2</a></li>
<li><a id="tab3" href="#tab-3">Tab 3</a></li>
<li><a id="tab4" href="#tab-4">Tab 4</a></li>
</ul>
<div class="tab">
<div id="a" class="tab-content">
<p>Tesing a.php </p>
</div>
<div id="b" class="tab-content">
<p>Tesing b.php </p>
</div>
<div id="c" class="tab-content">
<p>Tesing c.php </p>
</div>
<div id="d" class="tab-content">
<p>Tesing d.php </p>
</div>
</div>
</div>

Solution
Fix is to put your script code into a document ready function as below
<script>
$(window).load(function() {
$('#tab2').load('a.php');
$('#tab3').load('b.php');
$('#tab4').load('c.php');
});
</script>
Alternate Solution
Alternatively, you can workout as below.
As you are loading jquery from a third party domain, this document ready statements are executed first asynchronously. So download the jquery.min.js and load it from your local.

How to get the real address of tabbed page in HTML/CSS?

Good Day Guys,
I just want to ask if how will I be able to get the real address in my tabbed form in in HTML/CSS.
right now I can only redirect to tabbed which is pre-set as active.
My goal is to create a link that will direct me to other tabbed page. for example, from other page want to create a link that will direct me to tabbed page 2nd tab .
here's my code:
<div class="tabs">
<ul class="tab-links">
<li class="active">All</li>
<li>Pending</li>
<li>Approved</li>
<li>Completed</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<!--Codes here -->
</div>
<div id="tab2" class="tab">
<!--Codes here -->
</div>
<div id="tab3" class="tab">
<!--Codes here -->
</div>
<div id="tab4" class="tab">
<!--Codes here -->
</div>
</div>
in the address bar it only shows this even I clicked other tab. stay with this address:
/domain/beta/page_home_superadmin.php
but in the lower side of the browser, it shows this when I hover at tab2:
/domain/beta/page_home_superadmin.php#tab2
any suggestion on how will to get that address and a be able to create a link pointing to it.
Thanks.

You can try to use document.location.hash
<div class="tabs">
<ul class="tab-links">
<li class="active tab1" id="tab1">All</li>
<li class="tab2">Pending</li>
<li class="tab3">Approved</li>
<li class="tab4">Completed</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<!--Codes here -->
</div>
<div id="tab2" class="tab">
<!--Codes here -->
</div>
<div id="tab3" class="tab">
<!--Codes here -->
</div>
<div id="tab4" class="tab">
<!--Codes here -->
</div>
</div>
JavaScript:
$(document).ready(function() {
if ( document.location.hash ) {
$('.tab-links > li, div.tab').removeClass('active');
$('li' + document.location.hash.replace('#', '.')
+ ', div' + document.location.hash).addClass('active');
}
});

Show div element when all images within it have loaded

I have the following div element and within it I load images. I only want to show the div#main-slider when all the images have loaded within it:
I have tried the following jQuery:
$(window).load(function() {
$('#main-slider').animate({'opacity':1}, 300);
});
But it shows the div even when all the images aren't loaded.
CSS
#main-slider,
#main-slider #bo,
#main-slider #bg,
#main-slider #hugo{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
}
HTML
<div id="main-slider" class="flexslider">
<div id="boss" class="tab-container">
<ul class="slides boss-slides clearfix">
<li id="1">
<img src="mobilelp/img/boss_mobile_1.png" />
</li>
<li id="2">
<img src="mobilelp/img/boss_mobile_2.png" />
</li>
<li id="3">
<img src="mobilelp/img/boss_mobile_3.png" />
</li>
</ul>
</div>
<div id="bo" class="tab-container">
<ul class="slides bo-slides clearfix">
<li id="1">
<img src="mobilelp/img/bo_mobile_1.png" />
</li>
<li id="2">
<img src="mobilelp/img/bo_mobile_2.png" />
</li>
<li id="3">
<img src="mobilelp/img/bo_mobile_3.png" />
</li>
</ul>
</div>
<div id="bg" class="tab-container">
<ul class="slides bg-slides clearfix">
<li id="1">
<img src="mobilelp/img/bg_mobile_1.png" />
</li>
<li id="2">
<img src="mobilelp/img/bg_mobile_2.png" />
</li>
<li id="3">
<img src="mobilelp/img/bg_mobile_3.png" />
</li>
</ul>
</div>
<div id="hugo" class="tab-container">
<ul class="slides hugo-slides clearfix">
<li id="1">
<img src="mobilelp/img/hugo_mobile_1.png" />
</li>
<li id="2">
<img src="mobilelp/img/hugo_mobile_2.png" />
</li>
<li id="3">
<img src="mobilelp/img/hugo_mobile_3.png" />
</li>
</ul>
</div>
<ul class="flex-direction-nav">
<li>Previous
</li>
<li>Next
</li>
</ul>
</div>

I also had this requirement. I found success using the imagesLoaded plugin.
Pseudo code based on what I currently use in my application:
$('#main-slider').imagesLoaded({
progress: function (isBroken, $allImages, $loadedImages, $brokenImages) {
console.log('ok: ' + $loadedImages.length + ', bad: ' + $brokenImages.length);
},
done: function ($images) {
$('#main-slider').animate({'opacity':1}, 300);
}
});

It can get pretty simple (fiddle):
$(function () {
var $img = $(".waitFor img"),
n = $img.length;
$img.on("load error", function () {
!--n && $(".waitFor").fadeIn(300);
});
});
This effectively waits for all images to either load or error out before fading in the entire container.

This is a simple enough problem that I wouldn't want to use a plugin for it. It's actually quite simple, since jQuery provides a convinient .load() function to all image elements:
$(function(){
var loaded = 0;
var total = 0;
$(".waitFor img").each(function(i, e){
total++;
$(e).load(function(){
loaded++;
if(loaded == total)
console.log("Everything loaded");
});
});
});
JsFiddle