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);
});
Related
What I am trying to do here: Content 1 is in an active state when the page is open, and when "Open Map" is clicked, then Content 2 toggles with Content 1. It's the same for "Open Detail" too, and also when I close map or detail then Content 1 need to display again...
Additionally, for example after opening detail, and then opening map they need to toggle with each other. No need to display at the same time. And Content 1 needs to display again when 2 or 3 are closed...
$('#show-detail').on('click', function(event){
event.preventDefault();
$('.content3').slideToggle('slow', function(event){
if($(this).is(':visible')){
$('#show-detail').html('Close Detail');
} else {
$('#show-detail').html('Open Detail');
}
});
});
$('#show-map').on('click', function(event){
event.preventDefault();
$('.content2').slideToggle('slow', function(event){
if($(this).is(':visible')){
$('#show-map').html('Close map');
} else {
$('#show-map').html('Open map');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="content-wrapper">
<ul class="ul-wrap">
<li class="li-head"><i style="color:white;" class="far fa-building"></i>Summary</li>
<a id="show-detail" href="#"><li class="li-head-right">Open Detail</li></a>
<a id="show-map" href="#"><li class="li-head-right">Open Map</li></a>
</ul>
<div class="tabs-stage">
<div class="content1 d-flex">
<div class="d-image"><img src="https://dummyimage.com/120x120/000/fff"></div>
<div class="align-top">
Lorem Ipsum Text Text Text
</div>
</div>
<div class="content2" style="display:none;">
Map here
<div id="map"></div>
</div>
<div class="content3" style="display: none;">
Details Here
</div>
</div>
</div>
$('#show-detail').on('click', function(event){
event.preventDefault();
toggleViews('content3');
});
$('#show-map').on('click', function(event){
event.preventDefault();
toggleViews('content2');
});
function toggleViews(elmClass) {
var elm = $("." + elmClass);
var isVisible = elm.is(':visible');
$(".tabs-stage > div:visible").slideUp('slow', function() {
if(isVisible) {
$(".content1").slideDown();
} else {
elm.slideDown();
}
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-wrapper">
<ul class="ul-wrap">
<li class="li-head"><i style="color:white;" class="far fa-building"></i>Summary</li>
<a id="show-detail" href="#"><li class="li-head-right">Open Detail</li></a>
<a id="show-map" href="#"><li class="li-head-right">Open Map</li></a>
</ul>
<div class="tabs-stage">
<div class="content1 d-flex">
<div class="d-image"><img src="https://dummyimage.com/120x120/000/fff"></div>
<div class="align-top">
Lorem Ipsum Text Text Text
</div>
</div>
<div class="content2" style="display:none;">
Map here
<div id="map"></div>
</div>
<div class="content3" style="display: none;">
Details Here
</div>
</div>
</div>
I have an OwlCarousel with nav links within the first slide, is there a way to make the carousel return to the first slide after an event, be it a timer, or when the mouse moves out of the carousel?
Is it also possible to trigger the carousel with mousing over a link rather than clicking it?
Code snippet:
<div class="owl-carousel">
<div class="item" data-hash="slide0">
<ul>
<li><a class="button secondary url" href="#slide1">1</a></li><br/>
<li><a class="button secondary url" href="#slide2">2</a></li><br/>
<li><a class="button secondary url" href="#slide3">3</a></li><br/>
<li><a class="button secondary url" href="#silde4">4</a></li><br/>
<li><a class="button secondary url" href="#slide5">5</a></li><br/>
<li><a class="button secondary url" href="#slide6">6</a></li><br/>
</ul>
</div>
<div class="item" data-hash="slide1">
//some image
</div>
<div class="item" data-hash="slide2">
//some image
</div>
<div class="item" data-hash="slide3">
//some image
</div>
<div class="item" data-hash="slide4">
//some image
</div>
<div class="item" data-hash="slide5">
//some image
</div>
<div class="item" data-hash="slide6">
//some image
</div>
</div>
According the owlCarousel's docs you can use the to.owl.carousel function to slide to specific position.
Here is an example for both - going to the first slide (slides numbering starts with 0) and hover on the li elements to go to a specific slide on hover.
var owl;
$(document).ready(function(){
owl = $(".owl-carousel").owlCarousel({items:1});
$('#btn1').click(function() {
owl.trigger('to.owl.carousel', [0, 400]);
});
$('#ul1 li').hover(function() {
owl.trigger('to.owl.carousel', [parseInt($(this).text()) - 1, 400]);
});
});
body {
margin: 0;
padding: 0;
}
.owl-carousel .item {
height: 120px;
background: #4DC7A0;
padding: 1rem;
list-style: none;
margin: 10px;
text-align: center;
color: white;
font-size: 20px;
line-height: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.min.js"></script>
<!-- Set up your HTML -->
<div class="owl-carousel">
<div class="item"> slide1 </div>
<div class="item"> slide2 </div>
<div class="item"> slide3 </div>
<div class="item"> slide4 </div>
<div class="item"> slide5 </div>
<div class="item"> slide6 </div>
<div class="item"> slide7 </div>
<div class="item"> slide8 </div>
<div class="item"> slide9 </div>
<div class="item"> slide10 </div>
<div class="item"> slide11 </div>
<div class="item"> slide12 </div>
</div>
<button id="btn1">Go to first</button>
<ul id="ul1">
<li>1</li>
<li>5</li>
<li>10</li>
</ul>
I'm having trouble figuring out how to toggle a class depending on the anchor text that is clicked.
<div>
<a id="Menu1" href="#">Menu</a>
<div id="subMenu1" class="subLevel">
<p>stuff</p>
</div>
<div>
<a id="Menu2" href="#">Menu</a>
<div id="subMenu2" class="subLevel">
<p>stuff</p>
</div>
<div>
<a id="Menu3" href="#">Menu</a>
<div id="subMenu3" class="subLevel">
<p>stuff</p>
</div>
<script>
$(document).ready(function () {
$("#Menu" + [i]).on('click', function (e) {
e.preventDefault();
$("#subMenu" + [i]).toggleClass('dropDownShow');
});
});
</script>
Having trouble figuring out where var i changes from number 1 - 3 depenidng on anchor link that is clicked
Here is one way to do it:
<div>
<a id="Menu1" class="menu" href="#">Menu</a>
<div id="subMenu1" class="subLevel">
<p>stuff</p>
</div>
<div>
<a id="Menu2" class="menu" href="#">Menu</a>
<div id="subMenu2" class="subLevel">
<p>stuff</p>
</div>
<div>
<a id="Menu3" class="menu" href="#">Menu</a>
<div id="subMenu3" class="subLevel">
<p>stuff</p>
</div>
<script>
$(document).ready(function () {
$(".menu").on('click', function (e) {
e.preventDefault();
$(this).next().toggleClass('dropDownShow');
});
});
</script>
i have a page in web 'about TOEFL'. if i click about TOEFL, then the content/form was changing to content/form about TOEFL. when i click 'about TOEFL' the content was changing but when i click 'close', the form/content not changing. please help
this is my page code
<!-- Start Page 2 About -->
<div id="page2" class="content">
<div class="container_12">
<div class="grid_12">
<div class="slogan">
<h3>Help your <span>TOEFL</span> Score<em> High</em></h3>
</div>
</div>
<!-- Start menu-form -->
<form id="menu-form">
<div class="grid_2">
<div class="box 60px"> <img src="images/img1.png" alt="">
<div class="text1">About TOEFL</div>
</div>
</div>
<div class="grid_2">
<div class="box 60px"> <img src="images/img2.png" alt="">
<div class="text1">Tips and Trick</div>
</div>
</div>
<div class="grid_2">
<div class="box 60px"> <img src="images/img8.png" alt="">
<div class="text1">Cambridge</div>
</div><br><br><br><br><br><br><br><br>
</div>
</form>
<!-- End menu-form -->
<!-- Start AboutTOEFL-form -->
<form id="AboutTOEFL-form" style="display:none" class="grid_14">
<div id="filters" class="sixteen columns">
<ul class="clearfix">
<li><a href="#page2" onclick="showAboutTOEFL()">
<h5>About TOEFL</h5>
</a></li>
<li><a href="#" >
<h5>Tips And Trick</h5>
</a></li>
<li><a href="#page2" onclick="showMenuForm()">
<h5>Close</h5>
</a></li>
</ul>
</div>
<div class="box 1000px">
<img src="images/toefl-1.jpg" alt=""><br><br>
--my text--
</div>
</form>
<!-- End AboutTOEFL-form -->
</div>
</div>
<!-- End Page 2 -->
this is my java script
<script type="text/javascript">
var showAboutTOEFL = function() {
document.getElementById("menu-form").setAttribute("style", "display:none");
document.getElementById("AboutTOEFL-form").setAttribute("style", "display:block");
}
</script>
<script type="text/javascript">
var showMenuform = function() {
document.getElementById("menu-form").setAttribute("style", "display:block");
document.getElementById("AboutTOEFL-form").setAttribute("style", "display:none");
}
</script>
The casing on your onclick event is wrong. You have onclick="showMenuForm()", but your function name is showMenuform (lowercase "f").
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.