i want to hide id when i click on a href so its same id shows and other id will close automatically
example :
<div id="fit" class="heading">FIT</div>
<a href="#er">first</a>
<div id="er" style="display:none;">aksdjfhaskdj hskj hskjfh sd fghjgfdjf gdsjfdg jdfgjdf gjgdfjgfdjf gasdkjfasjfghsdj </div>
<a href="#erp">erp</a>
<div id="erp" style="display:none;">erp </div>
<div id="style" class="heading">style</div>
and script:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(e) {
$("a").click(function(e) {
var ab = $(this).attr("href");
//alert(ab);
//$("div").hide();
$(ab).show();
});
});
</script>
in html use class for anchor related div
<div id="fit" class="heading">FIT</div>
<a href="#er">first</a>
<div id="er" style="display:none;" class="anchorrel">aksdjfhaskdj hskj hskjfh sd fghjgfdjf gdsjfdg jdfgjdf gjgdfjgfdjf gasdkjfasjfghsdj </div>
<a href="#erp">erp</a>
<div id="erp" style="display:none;" class="anchorrel">erp </div>
<div id="style" class="heading">style</div>
<script>
$(document).ready(function(e) {
$("a").click(function(e) {
e.preventDefault();
var ab = $(this).attr("href");
//alert(ab);
$(".anchorrel").hide();// all div related to .anchorrel hide
$(ab).show();
});
});
</script>
see demo
You can do this:
$(document).ready(function (e) {
// Cache the anchor tag here
var $link = $('a');
// Click event handler for the link
$link.click(function (e) {
// prevent the default action of the anchor
e.preventDefault();
var id = this.href;
// Hide all the visible divs next to all the anchors
$link.next('div:visible').hide();
// Show the current div with id
$(id).show();
});
});
If you wan't to close all other div's and display only the div with the id that matches the href of the tag clicked than use the following:
$("a").click(function(e) {
var ab = $(this).attr("href");
$('div').hide();
$(ab).show();
});
I don't know why you comment it in the first place, maybe i don't understand what you wan't to acheive.
Here is a fiddle: http://jsfiddle.net/25RZR/
JavaScript
$(document).ready(function(e) {
$("a").click(function(e) {
var ab = $(this).attr("href");
$('.content').hide();
$(ab).show();
});
});
HTML
<div id="fit" class="heading">FIT</div>
<a href="#er">first</a>
<div id="er" class="content hide">aksdjfhaskdj hskj hskjfh sd fghjgfdjf gdsjfdg jdfgjdf gjgdfjgfdjf gasdkjfasjfghsdj </div>
<a href="#erp">erp</a>
<div id="erp" class="content hide">erp </div>
<div id="style" class="heading">style</div>
Well you can do better this way:
$(document).ready(function(e) {
$("a").click(function (e) {
e.preventDefault; // <------------stop the default behavior
var ab = $(this).attr('href'); // <------better to use in terms of performance
$(ab).show().siblings('div:not(.heading)').hide();
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.