Develop Reference

data-tab is not working properly in internet explorer

i have 3 tabs in html page, if i click on 2nd tab then click back to 1st tab then it is slightly scrolling up, but if i do same thing from 3rd tab then it is working properly. and it happens only in IE.
<div>
<div class="myTab">
<button id="btn1"
class="custom-tab" data-tab="tabFirst"></button>
<button id="btn2"
class="custom-tab" data-tab="tabSecond"></button>
<button id="btn3"
class="custom-tab" data-tab="tabThird"></button>
</div>
</div>
<script>
$(function(){
$('.custom-tab').on('click',function(){
someUpdateMethod($(this).attr("data-tab"));
})
});
</script>

window.scrollTo(0, 0); helps me to solve the problem

you can try this and one more thing internet explorer enable javascript.
<div id="jsClickable">
<div class="myTab">
<button id="btn1"
class="custom-tab" data-tab="tabFirst"></button>
<button id="btn2"
class="custom-tab" data-tab="tabSecond"></button>
<button id="btn3"
class="custom-tab" data-tab="tabThird"></button>
</div>
</div>
<script>
$(document).ready(function () {
$('#jsClickable').on('click', '.custom-tab', function () {
// someUpdateMethod($(this).attr("data-tab"));
alert($(this).attr("data-tab"));
alert($(this).data("tab"));
})
});
</script>

Think that you should try: $(this).data("tab")

show a hidden element jquery

I don't know why it doesn't work with bootstrap modal.
I want to show the hidden element.
I tried 3 different way's
(with
display:none; and in javascript a did $('..').show(),
visibility:hidden and in the javascript $('..').css('visibilty','visible'),
and the class="hidden" and in the javascript $('..').removeClass('hidden'))
here is my code :
$('.btn[id="zaki"]').click(function() {
$('#show_1524').show();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-danger" id="zaki">ilyes_show</button>
<div>
<p style="display:none;" id="show_1524">..................</p>
</div>

Though your code works fine but since inline styles have highest specificity replace the inline style with a class and then on button click use removeClass to remove it
$('.btn[id="zaki"]').click(function() {
$('#show_1524').removeClass('hideElem');
})
.hideElem {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-danger" id="zaki">ilyes_show</button>
<div>
<p class="hideElem" id="show_1524">..................</p>
</div>

$('.btn[id="zaki"]').click(function() {
$('#show_1524').show();
})
$('.btn[id="zaki-hide"]').click(function() {
$('#show_1524').hide();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<button class="btn btn-danger" id="zaki">ilyes_show</button>
<button class="btn btn-danger" id="zaki-hide">ilyes_hide</button>
<div>
<p style="display:none;" id="show_1524">..................</p>
</div>

how to replace div content for button click on same page in bootstrap

I like to show div content by 4 different button click on same page by replacing or hiding previous button click div content...
code-
<div class="col-sm-3">
<div class="btn-group-vertical" style="padding-top:12px;">
<button type="button" class="btn btn-warning" id="btn1">Btn1</button>
<button type="button" class="btn btn-warning" id="btn2">Btn2</button>
<button type="button" class="btn btn-warning" id="btn3">Btn3</button>
<button type="button" class="btn btn-warning" id="btn4">Btn4</button>
</div>
</div>
<div id="content" class="col-sm-9">
<div id="pilot" style="display:block;">
<p>Name1</p>
<h4>my name is A..........</h4>
</div>
<div id="design" style="display:block;">
<p>Name2</p>
<h4>my name is A..........</h4>
</div>
<div id="instrument" style="display:block;">
<p>Name3</p>
<h4>my name is A..........</h4>
</div>
<div id="innovations" style="display:block;">
<p>Name4</p>
<h4>my name is A..........</h4>
</div>
</div>
I have tried two jquery scripts but not worked as per my requirement...
script1-
$(document).ready(function(){
$("#btn1").click(function(){
$("#design").css("display","none");
$("#instrument").css("display","none");
$("#innovations").css("display","none");
$("#pilot").css("display","block");
}
$("#btn2").click(function(){
$("#pilot").css("display","none");
$("#instrument").css("display","none");
$("#innovations").css("display","none");
$("#design").css("display","block");
}
$("#btn3").click(function(){
$("#design").css("display","none");
$("#pilot").css("display","none");
$("#innovations").css("display","none");
$("#instrument").css("display","block");
}
$("#btn4").click(function(){
$("#design").css("display","none");
$("#instrument").css("display","none");
$("#pilot").css("display","none");
$("#innovations").css("display","block");
}
}
script2-
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#design").replaceWith( $("#pilot").show() );
$("#instrument").replaceWith( $("#pilot").show() );
$("#innovations").replaceWith( $("#pilot").show() );
}
$("#btn2").click(function(){
$("#pilot").replaceWith( $("#design").show() );
$("#instrument").replaceWith( $("#design").show() );
$("#innovations").replaceWith( $("#design").show() );
}
$("#btn3").click(function(){
$("#design").replaceWith( $("#instrument").show() );
$("#pilot").replaceWith( $("#instrument").show() );
$("#innovations").replaceWith( $("#instrument").show() );
}
$("#btn4").click(function(){
$("#design").replaceWith( $("#innovations").show() );
$("#instrument").replaceWith( $("#innovations").show() );
$("#pilot").replaceWith( $("#innovations").show() );
}
}
</script>
so please give me some suitable answer to workout ....if it is possible with bootstrap scrollspy then also suggest....tnx

Your first code example doesn't work as you haven't closed the braces and brackets correctly. Here's a working version: jsFiddle. Your second code example is using an entirely wrong approach.
That being said, by using DRY principles you can massively reduce the amount of JS code required to achieve this.
Firstly, add a data-* attribute to your .btn elements which can be used to identify the div to be shown when the button is clicked:
<button type="button" class="btn btn-warning" id="btn1" data-target="pilot">Btn1</button>
<button type="button" class="btn btn-warning" id="btn2" data-target="design">Btn2</button>
<button type="button" class="btn btn-warning" id="btn3" data-target="instrument">Btn3</button>
<button type="button" class="btn btn-warning" id="btn4" data-target="innovations">Btn4</button>
Then in your JS code you can write a single click handler which works for all buttons:
$('.btn').click(function() {
$('#content div').hide();
var target = '#' + $(this).data('target');
$(target).show();
})
Working example

Associate the target div's with the buttons using data-attributes. Now, on every click you can get the target value from that data-attribute and then use that to select only that div, that you need to show. You should hide all div's before showing the one that needs to be shown.
<a id="btn1" href="#" data-target="design">button 1</a>
<a id="btn2" href="#" data-target="pilot">button 2</a>
<a id="btn3" href="#" data-target="instrument">button 3</a>
<div id="design-div" class="targetdivs">Design</div>
<div id="pilot-div" class="targetdivs">Pilot</div>
<div id="instrument-div" class="targetdivs">Instrument</div>
<script>
$("#btn1, #btn2, #btn3").on("click", function(e){
e.preventDefault();
var target = $(this).data("target");
$(".targetdivs").css("display", "none");
$("#"+target+"-div").css("display", "block");
});//click
</script>

try this:
$('#btn1').click(function(){
$("#content div").hide()
$("#pilot").show()
});
$('#btn2').click(function(){
$("#content div").hide()
$("#design").show()
});
$('#btn3').click(function(){
$("#content div").hide()
$("#instrument").show()
});
$('#btn4').click(function(){
$("#content div").hide()
$("#innovations").show()
});
here's a jsfiddle

Add and remove class active on button with jquery onclick function

I'm actually using this button group structure with bootstrap. Now I need to add class active to each button when I click on it. And remove from it when I click on another button.
This is my HTML structure, is something like that:
<body>
<div id="header">
<div class="logo">Prova<span class="sec-logo">toscana</span>15</div>
<div class="bottoni">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default" id="b1">12345</button>
<button type="button" class="btn btn-default" id="b2">12345</button>
<button type="button" class="btn btn-default" id="b3">12345</button>
<button type="button" class="btn btn-default" id="b4">12345</button>
<button type="button" class="btn btn-default" id="b5">12345</button>
<button type="button" class="btn btn-default" id="b6">12345</button>
</div>
</div>
</div>
</body>
Someone who could help me? Thanks.

if .active class should not be removed from active button after clicking on it please use addClass instead of toggelClass
$("#header .btn-group[role='group'] button").on('click', function(){
$(this).siblings().removeClass('active')
$(this).addClass('active');
})
jsfiddle example
it is also good practice to narrow buttons selection, I used #heade id and .btn-group[role='group'] which makes script applied only on buttons inside all button groups iside <div id="header"></div>
and here you have .active class definition:
.btn.active{
background-color: red;
}

You are looking for something like:
$('.btn').on('click', function(){
$(this).siblings().removeClass('active'); // if you want to remove class from all sibling buttons
$(this).toggleClass('active');
});
Check jsFiddle

You should use a combination of .each() and .click() here. So it will target every button in stead of only the first
$('#header .btn').each(function(){
$(this).click(function(){
$(this).siblings().removeClass('active'); // if you want to remove class from all sibling buttons
$(this).toggleClass('active');
});
});

I hope this will help you because it works perfectly for me
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn").each(function(){
$(this).click(function(){
$(this).addClass("active");
$(this).siblings().removeClass("active");
});
});
});
</script>
Try this one

How to know the button pressed among buttons in the div in Javascript

I have a div of 4 buttons, when I click on any button it redirects to the same page for all the buttons, I want to know which button the user has pressed before going to the next page, I've been trying, but couldn't find that.
Here is my code :
$( "#buttons" ).click(function() {
alert('button');
window.location.href = "score.html";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="countdown"></p>
<div id="buttons">
<button type="button" id="button1">button 1</button>
<button type="button" id="button2">button 2</button>
<button type="button" id="button3">button 3</button>
<button type="button" id="button4">button 4</button>
</div>
Do you have any idea

The element that the click started in is available as target on the event object passed into your handler, so (but see more below):
// Accept the event arg -------v
$( "#buttons" ).click(function(e) {
alert('button: ' + e.target.id); // <=== Use e.target.id to get its ID
// window.location.href = "score.html"; (commented out for live demo)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="countdown"></p>
<div id="buttons">
<button type="button" id="button1">button 1</button>
<button type="button" id="button2">button 2</button>
<button type="button" id="button3">button 3</button>
<button type="button" id="button4">button 4</button>
</div>
Note that that will do the alert whenever there's a click inside the #buttons div, even if it's not on a button. If you only want clicks on the buttons, you can use a selector with .on to only call you when the click went through a button. It will call your handler as though you had hooked the handler directly to the buttons, even though in fact you've hooked it to the #button div, and so we use this.id for the ID:
$( "#buttons" ).on("click", "button", function() {
alert('button: ' + this.id);
// window.location.href = "score.html"; (commented out for live demo)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="countdown"></p>
<div id="buttons">
<button type="button" id="button1">button 1</button>
<button type="button" id="button2">button 2</button>
<button type="button" id="button3">button 3</button>
<button type="button" id="button4">button 4</button>
</div>