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")

Better ways to write this JQuery code

When the page load/reload I want to keep the first button with a background-color, and when another button is clicked, that first button color disappear.
I have made this code for it:
$(document).ready(function(){
$(".target1").css("background-color", "red");
$(".target1").css("color", "white");
$(".target2").click(function(){
$(".target1").css("background-color", "transparent");
$(".target1").css("color", "black");
$(".target2").css("background-color","red");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="collapse3">
<ol>
<button class="target1" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/1.html')">F01-Fabrication-1</button><br>
<button class="target2" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/2.html')">F01-Fabrication-2</button><br>
<button class="target3" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/3.html')">F01-Fabrication-3</button><br>
<a class="target4" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/4.html')">F01-Fbuttonbrication-4</button><br>
<button class="target5" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/5.html')">F01-Fabrication-5</button><br>
</ol>
</div>
I have lots of other buttons, so doing this kind of code in Jquery I think it isn't the best practice...I need help to explain to me a better way to do this? I will appreciate your teachings!
Thanks

You want the this function:
$(document).ready(function() {
$(".target").css("color", "black").css("background-color", "white");
$(".target1").css("background-color", "red");
$(".target1").css("color", "white");
$(".target").click(function() {
$(".target1").css("background-color", "none");
$(".target").css("color", "black").css("background-color", "white");
$(this).css("background-color", "red");
});
});
<button class="target target1" type="button">
Button 1
</button>
<button class="target target2" type="button">
Button 2
</button>
<button class="target target3" type="button">
Button 3
</button>
<button class="target target4" type="button">
Button 4
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
JSFiddle Example
Hope this helps!
EDIT: Moved to code snippet

You can make it smaller like this:
$(document).ready(function() {
$(".btn").click(function() {
$('.active').removeClass('active');
$(this).addClass('active');
});
});
.active {
background-color: red;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="collapse3">
<ol>
<button class="target1 btn" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/1.html')">F01-Fabrication-1</button>
<br>
<button class="target2 btn" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/2.html')">F01-Fabrication-2</button>
<br>
<button class="target3" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/3.html')">F01-Fabrication-3</button>
<br>
<a class="target4" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/4.html')">F01-Fbuttonbrication-4</button><br>
<button class="target5" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/5.html')">F01-Fabrication-5</button><br>
</ol>
</div>

For setting more then one property try:
$("p").css({"background-color": "yellow", "font-size": "200%"});
pass an object in css() method.

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

How hide div if another div is open use javascript

i have div like this use javascript :
<script>
$(document).ready(function(){
$("#btnmsg-1").click(function(){
$(".msgid-1").show();
});
$("#btnmsg-2").click(function(){
$(".msgid-2").show();
});
$("#btnmsg-3").click(function(){
$(".msgid-3").show();
});
$("#btnmsg-4").click(function(){
$(".msgid-4").show();
});
});
</script>
<div>NAME : ABCDEF <button id="btnmsg-1">message</button></div>
<div class="msgid-1" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
<div>NAME : GHIJKL <button id="btnmsg-2">message</button></div>
<div class="msgid-2" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
<div>NAME : MNOPQR <button id="btnmsg-3">message</button></div>
<div class="msgid-3" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
<div>NAME : STUVWX <button id="btnmsg-4">message</button></div>
<div class="msgid-4" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
if i click button id="btnmsg-1" then div class="msgid-1" show, and then i click button id="btnmsg-3" then div class="msgid-3" show but div class="msgid-1" not hide or close,my question how hide the div if another div is open?

Instead of using separate handlers for each, you can use the related positioning of the elements along with classes to group them to show/hide
ie, Add a class like btnmsg to all the buttons and msgedit to all the div's that have to be shown/hidden. Now register a click handler to .btnmsg elements, from your markup the .msgedit element to be shown is the next sibling of the clicked button so show that then hide all other .msgedit elements.
$(document).ready(function() {
var $edits = $('.msgedit')
$(".btnmsg").click(function() {
var $this = $(this).parent().next().show();
$edits.not($this).hide()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>NAME : ABCDEF
<button class="btnmsg" id="btnmsg-1">message</button>
</div>
<div class="msgid-1 msgedit" style="display:none;">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send" />
</div>
<div>NAME : GHIJKL
<button class="btnmsg" id="btnmsg-2">message</button>
</div>
<div class="msgid-2 msgedit" style="display:none;">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send" />
</div>
<div>NAME : MNOPQR
<button class="btnmsg" id="btnmsg-3">message</button>
</div>
<div class="msgid-3 msgedit" style="display:none;">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send" />
</div>
<div>NAME : STUVWX
<button class="btnmsg" id="btnmsg-4">message</button>
</div>
<div class="msgid-4 msgedit" style="display:none;">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send" />
</div>

Please add same classes to similar elements, and then use this jQuery code instead:
$(document).ready(function(){
$(".btnmsg").click(function(){
$(".msgid").hide();
$(this).parent().next(".msgid").show();
});
});
See the complete DEMO working: https://jsfiddle.net/lmgonzalves/n5f78kqs/

jsBin demo
don't use msgid-1, msgid-2 etc... cause it defeats the purpose of classNames. Use only msg
Same goes for your buttons. Remove the buttons IDs. use Class class="btn"
Don't use inline styles. Use <style> instead or call-to an external stylesheet.
HTML
<div class="btn">
NAME : ABCDEF <button>message</button>
</div>
<div class="msg">
<textarea></textarea>
<input type="submit" name="btnsend" value="Send">
</div>
CSS:
.msg{
display:none;
}
See how more readable is now your code?
jQuery:
var $msg = $(".msg"); // Get all .msg DIVs
$(".btn").on("click", "button", function( e ){
$msg.hide(); // Hide all
$(e.delegateTarget).next().show(); // Show next
});

You can do this by calling hide() on the elements you would like to hide.
For example, you would make the following change:
// Old
$("#btnmsg-1").click(function(){
$(".msgid-1").show();
});
//New
$("#btnmsg-1").click(function(){
$(".msgid-1").show();
$(".msgid-2").hide();
$(".msgid-3").hide();
$(".msgid-4").hide();
});
A cleaner way to do this would be to give all of your messages a "message" class, then your onClick handlers would look like this:
$("#btnmsg-1").click(function(){
$("#message").hide();
$(".msgid-1").show();
});
Hope that helps!

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