I have 4 different divs and 4 buttons, I'm trying to create a tabbed content using jQuery but I can't get it working right. So, I have used data-tab attribute.
jsfiddle.net
jQuery(document).ready(function() {
jQuery('#tabInteract .buttons a').click(function() {
var index = jQuery(this).index();
if(jQuery(this).hasClass('active')) {
jQuery(this).removeClass('active');
jQuery('#' + jQuery(this).data('tab')).toggleClass(true);
} else {
jQuery('#tabInteract .buttons a').removeClass('active');
jQuery(this).addClass('active')
jQuery('#' + jQuery(this).data('tab')).toggleClass(true);
}
})
});
When I click on next button it doesnt close the previous div.
To achieve this behaviour you need to toggle the state of the active button, along with it's related tab, whilst hiding all the other tabs and removing the active class from the other buttons. Try this:
$('#tabInteract .buttons a').click(function() {
var $button = $(this).toggleClass('active');
$('#tabInteract .buttons a').not($button).removeClass('active');
var $tab = $('#' + $(this).data('tab')).toggle();
$('.closable_box').not($tab).hide();
})
a {
display: inline;
margin: 5px;
color: #000;
}
a.active {
color: red;
}
.closable_box {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabInteract">
<div class="buttons">
<a data-tab="sports" href="#">Button A</a>
<a data-tab="cars" href="#">Button B</a>
<a data-tab="fruits" href="#">Button C</a>
<a data-tab="cats" href="#">Button D</a>
</div>
</div>
<div class="closable_box" id="sports">
Sports
</div>
<div class="closable_box" id="cars">
Cars
</div>
<div class="closable_box" id="fruits">
Fruits
</div>
<div class="closable_box" id="cats">
Cats
</div>
please help me for remove or hide my #id on url browser.
example:
my menu1 target on "#p1"
my site "mysite.com/index.htm"
when i click menu1 on my browser will like this "mysite.com/index.htm#p1"
i need my id not show on url browser just "mysite.com/index.htm" not like this "mysite.com/index.htm#p1"
#p1:target { background: red;}
#p2:target{ background: green;}
#p3:target{ background: blue;}
#p4:target{ background: yellow;}
#p5:target{ background: coral;}
#p6:target{ background: skyblue;}
ul{list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {float: left;}
li a{ display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;}
li a:hover {
background-color: #111;
}
<div id="menu">
<input type="checkbox" id="tbl-menu"/>
<label for="tbl-menu"><img src="drop.png" height="40px" width="40px" alt=""></label>
<nav class="nav">
<ul class="tombol">
<li class="tombolmenu">
<a class="t1" href="#p1">Menu1</a></li>
<li><a class="t2" href="#p2">Menu2</a></li>
<li><a class="t3" href="#p3">Menu3</a></li>
<li><a class="t4" href="#p4">Menu4</a></li>
<li><a class="t5" href="#p5">Menu5</a></li>
<li><a class="t6" href="#p6">Menu6</a></li>
</ul>
</nav>
</div>
<!-- My page target -->
<div id="p1"> Page1 </div>
<div id="p2"> Page2 </div>
<div id="p3"> Page3 </div>
<div id="p4"> Page4 </div>
<div id="p5"> Page5 </div>
<div id="p6"> Page6 </div>
I know this question is starting to be old in Internet years but I thought I'd share my solution (which is loosely based off Janmejay Agrawal's).
It basically replaces the standard behaviour of a hyperlink and creates a smooth scrolling to the desired element.
This code uses "vanilla" JS and should work with most web browsers.
//Get all the hyperlink elements
var links = document.getElementsByTagName("a");
//Browse the previously created array
Array.prototype.forEach.call(links, function(elem, index) {
//Get the hyperlink target and if it refers to an id go inside condition
var elemAttr = elem.getAttribute("href");
if(elemAttr && elemAttr.includes("#")) {
//Replace the regular action with a scrolling to target on click
elem.addEventListener("click", function(ev) {
ev.preventDefault();
//Scroll to the target element using replace() and regex to find the href's target id
document.getElementById(elemAttr.replace(/#/g, "")).scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest"
});
});
}
});
Should this code not be correct, please feel free to point it out !
There are several ways to do it, and my favourite is to make a custom function to scroll to in page link instead of relying on browser for it.
Like this
$("a[href^='#']").click(function(e){
e.preventDefault();
var elem = $($(this).attr('href'));
/* check for broken link */
if(elem.length)
$(window).animate('scrollTop' , elem.offset().top)
})
In addition of hiding '#id' from url it'll also animate scrolling.
Hope It'll help.
i have two links and want to toggle its class when click on any link.
my links are
<a id="single" class="btn" >
<a id="double" class="btn active">
so i want to change class from btn to btn active
i have this code
$(document).ready(function(){
$('a.btn').click(function(){
$(this).removeClass('focus active');
$(this).removeClass('active');
$(this).toggleClass("btn active");
});
});
I tried with this code because in some other javascript in my accpliceation is also adding these classes.
this work fine when its like bellow
<a id="single" class="btn" >
<a id="double" class="btn active">
but when my first button is active like bellow
<a id="single" class="btn active" >
<a id="double" class="btn">
this did't work but give classes as bellow when click on double
<a id="single" class="btn active" >
<a id="double" class="active">
this is strange cause its working when <a id="double" is active but did't work when <a id="single" is active.
all i want to do is when click on any link,
1. remove all classes from old link and give old link class "btn"
2. remove all classes from clicked link and give class "btn active"
how to fix this?
You just need to toggle class for the current clicked link, and before that, remove active and focus class for all links, like this:
$('a.btn').click(function(){
$("a.btn").removeClass("active focus");
$(this).toggleClass("active");
});
a.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="single" class="btn active">single</a>
<a id="double" class="btn">double</a>
Basic toggling
The following code toggles the class active on your buttons, which means it adds it when it's not there and it removes it when it's there :
$(document).ready(function(){
$('a.btn').click(function(){
$(this).toggleClass("active");
});
});
Demo
$(document).ready(function(){
$('a.btn').click(function(){
$(this).toggleClass("active");
});
});
body {
margin: 0;
}
.btn {
border: 1px solid black;
padding: 10px;
margin: 10px;
display: inline-block;
background: #99f;
cursor: pointer;
}
.btn.active {
background: #00f;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a id="single" class="btn">Button 1</a>
<a id="double" class="btn active">Button 2</a>
<a id="trupple" class="btn">Button 3</a>
<a id="quadruple" class="btn">Button 4</a>
Allow only one active button
If you want to have exactly one active button at all times, you should just remove the class active from ALL of your buttons and add it to the one clicked, which you could do like this :
$(document).ready(function(){
$('a.btn').click(function(){
$('.btn').removeClass("active");
$(this).addClass("active");
});
});
Demo
$(document).ready(function(){
$('a.btn').click(function(){
$('.btn').removeClass("active");
$(this).addClass("active");
});
});
body {
margin: 0;
}
.btn {
border: 1px solid black;
padding: 10px;
margin: 10px;
display: inline-block;
background: #99f;
cursor: pointer;
}
.btn.active {
background: #00f;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a id="single" class="btn">Button 1</a>
<a id="double" class="btn active">Button 2</a>
<a id="tripple" class="btn">Button 3</a>
<a id="quadruple" class="btn">Button 4</a>
Your jQuery selector may be the problem.
You are detecting the click on all anchor tags with class "btn":
$('a.btn').click(function(){
But then you are removing class "btn". How can future clicks be detected? Answer: they won't.
Note that it is not necessary to specify both classes in the line
$(this).toggleClass("btn active");
It appears that you really only want to toggle the active class, so just do
$(this).toggleClass("active");
Also, I find it most useful to specify exactly what I want added/removed at any given time. In other words, I try only to use addClass() and removeClass(), rather than toggleClass(). It requires more code, but it is more safe.
Please change jquery code as follows :
$(document).ready(function(){
$('a.btn').click(function(){
$(this).toggleClass("btn btn active");
});
});
This works for me. hope this helps :)
$("a.btn").on("click", function() {
$(this).toggleClass("active");
$(this).siblings().toggleClass("active");
});
Please use the following code before your toggle script.
This will fix toggle class issue.
$("YourToggleSeletor").unbind('click');
I am using a script for a gallery in which clicking on an element in the navigation shows only one div, but hides the others.
Currently my script is very specific, as I need to add a new function for every possible instance. See below... You can imagine this grows out of control easily the more images are added.
Can someone help me make this code more generic and elegant? I'm not very experienced with Javascript/JQuery but this is getting a bit embarrassing lol
So in case it's not clear from the code: the #li1, #li2, #li3 etc are the navigational thumbnails which are always visible. The #img1, #img2, #img3 etc. are the variable displayed divs. When one is visible, the rest should be hidden.
Additional questions:
for every #img1 displayed, I'd like to also show a title in a separate div, let's say #title1, #title2, etc. How do I do this? So eg clicking #li1 would show #img1 and #title1 but hide all other #img.. and #title..
all #'s contain images. I've noticed that when one of the images is broken, the whole script stops working properly (all #img.. divs show at once). Why is that?
this script doesn't actually hide all the images until everything is loaded, which you don't notice when running the HTML locally, but you do when you're waiting for the images to download. I'm suspecting because the $("#li1").load(function() refers to a div that is further down in the document. How can I counter this?
I hope I'm not asking too much, I've tried to understand this myself but I can't figure it out.
$("#li1").load(function() {
$("#img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img0, #intro").hide();
$("#img1").show();
});
$("#li1").on('click', function() {
$("#img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img0").hide();
$("#img1").show();
});
$("#li2").on('click', function() {
$("#img1, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img0").hide();
$("#img2").show();
});
$("#li3").on('click', function() {
$("#img2, #img1, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img0").hide();
$("#img3").show();
});
etc.
I would probably try something like this:
Thumbnails like:
<li class="thumbnail" data-imageId="0">
...thumbnail...
</li>
<li class="thumbnail" data-imageId="1">
...thumbnail...
</li>
<li class="thumbnail" data-imageId="2">
...thumbnail...
</li>
Images like:
<div class="image" data-imageId="0">
...image...
</div>
<div class="image" data-imageId="1" style="display: none;">
...image...
</div>
<div class="image" data-imageId="2" style="display: none;">
...image...
</div>
<!-- The style attribute in these element hides the element by default,
while still allowing jQuery to show them using show(). -->
And then the JS:
$(".thumbnail").click(function() {
// Hides all images.
$(".image").hide();
// Shows appropriate one.
var imageId = $(this).data("imageId"); // Fetches the value of the data-imageId attribute.
$(".image[data-imageId="+imageId+"]").show();
});
I see that your li's have ids of 'li1', 'li2', etc. Assign them all a specific class, like 'liLinks'.
Then, add an event handler for that class like this:
$(".liLinks").click(function(){
var ImageToShow = $(this).prop("id").replace("li", ""); // This gets the number of the li
for (i=0; i<= 10; i++){ //or however many images you have
if (i != ImageToShow)
$("#img" + i).hide();
else
$("#img" + i).show();
}
});
Oh, and you can show and hide any other elements with the same method used above. Just make sure their naming convention is the same, and you should be all set!
So, I have two solutions for you:
First option: Edit the HTML code to fix this logic:
<li class="nav" data-image="0">0</li>
<li class="nav" data-image="1">2</li>
<li class="nav" data-image="2">3</li>
...
...and so on.
Now the JavaScript code will be pretty short and easy, here it is:
function showOne(e) {
var max = 5, // assuming that there are 5 images, from #img0 to #img4
toShow = e.target.dataset.image;
for (var i=0; i < max; i++) {
if (i == toShow) $('#img'+i).hide();
else $('#img'+i).show();
}
}
$('.nav').bind('click', showOne);
If your logic isn't this one then i suggest you to edit the HTML to fix this logic, which is the easiest way to do what you want.
Second option: I am assuming that you use a logic like this:
#li0 shows #img0
#li1 shows #img1
#li2 shows #img2
...
#liN shows the Nth img of the array
Here's the code then:
function showOne() {
var max = 4, // assuming that there are 5 images, from #img0 to #img4
toShow = this.id.substr(2);
$('#img'+toShow).show();
for (var i=0; i < max; i++) {
if (i != toShow) $('#img'+i).hide();
}
}
$('#li0, #li1, #li2, #li3, #li4').bind('click', showOne);
In this snippet I only used 5 images, but you can add more images changing the max value and adding the relative li elements in the $('#li0, #li1, ...) selector.
Just hide all of them with CSS, then override the one you care about to show.
<!doctype html>
<html>
<head>
<style type="text/css">
#showbox img { display: none; width: 300px; }
#showbox.show1 img#img1,
#showbox.show2 img#img2,
#showbox.show3 img#img3,
#showbox.show4 img#img4 { display: block; }
</style>
</head>
<body>
<div id="showbox" class="3">
<img id="img1" src="http://upload.wikimedia.org/wikipedia/commons/6/6f/ChessSet.jpg">
<img id="img2" src="http://upload.wikimedia.org/wikipedia/commons/c/c3/Chess_board_opening_staunton.jpg">
<img id="img3" src="http://www.umbc.edu/studentlife/orgs/chess/images/News%20and%20Events/chess_sets.jpg">
<img id="img4" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Russisches_festungsschach.PNG/350px-Russisches_festungsschach.PNG">
</div>
<input onchange="document.getElementById('showbox').className = 'show' + this.value;">
</body>
</html>
Your images is not hidden while the images is loading because you didn't use
$(function () {
$("imgs").hide ();
});
This function is excuted when the DOM (HTML) is loaded not the images.
The code will be "HTML":
link1
link2
link3
...
jQuery:
$(function () {
$(".img").hide ();
$(".nav").click (function (e) {
$(".img").show ();
});
});
As you might expect you need to change this code to be more progressive but you now get the idea of making them hidden when the page finish liading not when the images finish downloading. And good luck ;) .
var $img = $('#images img'); /* Cache your selector */
$('#nav li').click(function(){
$img.fadeOut().eq( $(this).index() ).stop().fadeIn();
});
#images{ position:relative; }
#images img{ position:absolute; left:0; }
#images img + img {display:none; } /* hide all but first */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id=nav>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div id=images>
<img src="//placehold.it/50x50/cf5" alt="">
<img src="//placehold.it/50x50/f0f" alt="">
<img src="//placehold.it/50x50/444" alt="">
</div>
Following is an approach:
Add special classes to identify images.
Use classes to show/hide image like: .showing{display:block;}
Use data attribute to store title like: data-title="title"
Add class to identify li and mark selected li with another class like active
$(function() {
$("li.switch").click(function() {
var liActive = $("li.active");
var imgActive = liActive.data("image");
$(imgActive).removeClass("showing").addClass("hidden");
$(liActive).removeClass("active");
//currently clicked li
var $this = $(this);
$this.addClass("active");
var d = $this.data("image");
$(d).removeClass("hidden").addClass("showing");
$("#imgTitle").text($(d).data("title"));
});
});
.gallery {
width: 250px;
height: 250px;
padding: 10px;
}
img {
height: 200px;
width: 200px;
margin: auto auto;
}
.hidden {
display: none;
}
.showing {
display: inline-block;
}
ul {
list-style: none none outside;
display: inline;
}
li {
list-style: none none outside;
display: inline-block;
padding: 3px 6px;
border: 1px solid grey;
color: #0f0;
cursor: pointer;
}
li.active {
border: 2px solid red;
background-color: #c0c0c0;
color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="gallery">
<img src='https://c2.staticflickr.com/4/3862/15320672416_65b28179b4_c.jpg' class='gimage showing' id='img1' data-title="This is image 1" />
<img src='https://c2.staticflickr.com/4/3893/15156335390_16e16aa1c9_c.jpg' class='gimage hidden' id='img2' data-title="This is image 2" />
<img src='https://c1.staticflickr.com/3/2942/15341799225_09d0f05098_c.jpg' class='gimage hidden' id='img3' data-title="This is image 3" />
<img src='https://c2.staticflickr.com/4/3907/15339877992_695dd1daae_c.jpg' class='gimage hidden' id='img4' data-title="This is image 4" />
<img src='https://farm3.staticflickr.com/2942/15333547162_325fefd6d1.jpg' class='gimage hidden' id='img5' data-title="This is image 5" />
</div>
<div id="imgTitle"></div>
<ul>
<li class="switch active" id="li1" data-image="#img1">1</li>
<li class="switch" id="li1" data-image="#img2">2</li>
<li class="switch" id="li1" data-image="#img3">3</li>
<li class="switch" id="li1" data-image="#img4">4</li>
<li class="switch" id="li1" data-image="#img5">5</li>
</ul>
Try it in this fiddle
Fix from Ricardo van den Broek's code, because
var imageId = $(this).data("imageId");
is seem doesn't work. It's returns "Undefined". So we need to change it to
var imageId = $(this).attr("data-imageId");
Here is all the code,
HTML (Thumbnail section)
<ul>
<li class="thumbnail" data-imageId="0">
Thumbnail 0
</li>
<li class="thumbnail" data-imageId="1">
Thumbnail 1
</li>
<li class="thumbnail" data-imageId="2">
Thumbnail 2
</li>
</ul>
HTML (Image section)
<div class="image" data-imageId="0">
Image 0
</div>
<div class="image" data-imageId="1" style="display: none;">
Image 1
</div>
<div class="image" data-imageId="2" style="display: none;">
Image 2
</div>
JavaScript (jQuery)
$(".thumbnail").click(function() {
$(".image").hide();
// Shows the appropriate one.
var imageId = $(this).attr("data-imageId");
$(".image[data-imageId="+imageId+"]").show();
});
i want that when i click this link its color changes to the given color
<li id="press">Press</li>
The CSS declaration :active will accomplish what you're after. http://www.w3schools.com/CSS/pr_pseudo_active.asp
Example.
a:active {
color: #C00;
}
NB.
a:active MUST come after a:hover in the CSS definition in order to be effective!
Here is the sample Css for the visited hyperlink
a:link {color:#FF0000}
a:visited{color:Red}
Hope that will help.
All links? a:focus { color: orange; }
Some links? Give them a class, eg <a class="foo" ...>: a.foo:focus { color: purple; }
One link? Give it an id, eg <a id="bar" ...>: a#bar:focus { color: #BADA55; }
You can accomplish that at server-side with PHP or with JS.
With PHP all you need is to added a given classname to the link once clicked.
a very simple example would be:
<a href="myURL" class="<?php if(ExpressionToDetermineIfLinkIsClicked) echo 'selected'; ?>">
and CSS:
.selected { color: #FF0000; }
If you would like to do it with JS , and you are using any JS Framework just search the frameworks' site for "How to add an event" & "How to add classname" then combine what you get to know from the search results.
If you are, by coincidence, using prototype.js framework,
then you can try the following:
function selectLink(link){
link.addClassName('selected');
var otherLinks = link.siblings();
for(var i = 0; i < otherLinks.lenght; i++){
otherLinks[i].removeClassName('selected');
}
}
document.observe('dom:loaded', function(){
$('menu').observe('click', function(event){
event.stop();
var link = Event.element(event);
selectLink(link);
});
});
---
<div id="menu">
<a href="url1" id="link1" class="">
<a href="url2" id="link2" class="">
<a href="url3" id="link3" class="">
</div>