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>
first
<div id="er" style="display:none;">aksdjfhaskdj hskj hskjfh sd fghjgfdjf gdsjfdg jdfgjdf gjgdfjgfdjf gasdkjfasjfghsdj </div>
erp
<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>
first
<div id="er" style="display:none;" class="anchorrel">aksdjfhaskdj hskj hskjfh sd fghjgfdjf gdsjfdg jdfgjdf gjgdfjgfdjf gasdkjfasjfghsdj </div>
erp
<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/
Fiddle
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>
first
<div id="er" class="content hide">aksdjfhaskdj hskj hskjfh sd fghjgfdjf gdsjfdg jdfgjdf gjgdfjgfdjf gasdkjfasjfghsdj </div>
erp
<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();
});
});
Demo in action
Related
http://jsfiddle.net/cEJtA/
$(function () {
$(".div1, .div2").hide();
$(".link1, .link2").bind("click", function () {
$(".div1, .div2").hide();
if ($(this).attr("class") == "link1")
{
$(".div1").show();
}
else
{
$(".div2").show();
}
});
});
Can anyone please help with this code.
I want 5 divs that work based on the link that's clicked, so there are 5 divs either shown/hidden.
I can do everything except the if/else statement for more divs - any help please?
Off the top of my head, you can add a data attribute on the class and use that to toggle the targeted div element.
$(function () {
$(".div1, .div2,.div4, .div3, .div5").hide();
$("a").bind("click", function () {
$(".div1, .div2,.div4, .div3, .div5").hide();
var target = $(this).data("target");
$("."+target).toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
Link 1
Link 2
Link 3
Link 4
Link 5
<div class="div1">I'm div1</div>
<div class="div2">I'm div2</div>
<div class="div3">I'm div3</div>
<div class="div4">I'm div4</div>
<div class="div5">I'm div5</div>
</body>
</html>
you could also get the current element's class, parse it and generate div class name off of it and use that to show/hide things. e-g
link1 => div1 (replace link with div)
Try this way
<html>
<body>
Link 1
Link 2
<div id="link1" class="commonDiv">I'm div1</div>
<div id="link2" class="commonDiv">I'm div2</div>
</body>
</html>
$(function () {
$(".commonDiv").hide();
$(".link1, .link2").bind("click", function () {
$(".commonDiv").hide();
var id = $(this).attr("class");
$('#' + id).show();
});
});
I have a show/hide toggle that switches between content if menu a is clicked.
Before the click function is triggered content is shown in the default div.
For some reason if you click one of the a tag's twice it successfully toggles the content on/off; however you are left with a blank screen
This is a poor user experience.
How can I avoid this and ensure that the default content is shown if a user selects a menu item twice?
$(document).ready(function() {
var $show = $('.show');
$('.menu a').on('click', function(e) {
e.preventDefault();
$show.not(this).stop().hide(450);
$($(this).attr('href')).stop().toggle(450);
$('.default').addClass('hidden');
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
Screen
Music
Art
Food
</div>
<div id="show-screen" class="show">show screen</div>
<div id="show-music" class="show">show music</div>
<div id="show-art" class="show">show art</div>
<div id="show-food" class="show">show food</div>
<div class="default">default content</div>
Thanks
Although I'd suggest a completely different approach to handle this problem, to make your code work, I'd do something like this.
https://jsfiddle.net/6cnt95ap/1/
$(document).ready(function() {
var $show = $('.show');
$('.menu a').on('click', function(e) {
e.preventDefault();
$show.not(this).stop().hide(450);
$($(this).attr('href')).stop().toggle(450);
$('.default').addClass('hidden');
window.setTimeout(()=>{
var showDefault = true, divs = $('.show');
divs.each(function(){
if($(this).css("display") !=='none'){
showDefault = false;
return false;
}
});
if(showDefault){
$('.default').removeClass('hidden');
}
}, 500)
});
})
I'm try to change all html anchor href link using jQuery but it's not work properly. When I click the button it's select the first link and replace everywhere.
var link = $('#content a[href]');
$("button").click(function() {
var lin = $("#content a").attr('href');
var rep = "http://example.com/?redirect=";
$("#content a[href]").attr("href", rep + "" + $("#content a").attr('href'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
Google
Facebook
</div>
<button>Click</button>
<div class="p"></div>
You are using $("#content a").attr('href') to replace the href...It will find the first match and replace to all
You have to use each() to find all the links and then use $(this).attr('href') to differentiate
Stack Snippet
$(document).ready(function() {
$("button").click(function() {
var rep = "http://example.com/?redirect=";
$("#content a[href]").each(function() {
$(this).attr("href", rep + "" + $(this).attr('href'));
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
Google
Facebook
</div>
<button>Click</button>
<div class="p"></div>
I'm having a table listing some comments. Next to the comment there are two links, the hide and show. So what I want to do is when clicking the right link to change the comment's status with ajax.
// inside a loop for showing all comments
<div class="pull-right" class="publish-history-comment">
Publish
</div>
<div class="pull-right" class="hide-history-comment">
Hide
</div>
<?= $row->comment; ?>
<script type="text/javascript">
function toggleHistoryNotes(status) {
var link = $('.' + status + '-history-comment-link');
var time = link.attr('data-time');
alert(time);
}
</script>
How can I target which link was clicked and do the ajax call to toggle the comment status?
You can change your JQuery to trigged on click on a tag. Also, you should add e.preventDefault(); as this is gonna be click on the a tag, and this would prevent default action.
$('.pull-right a').on('click', function(e) {
e.preventDefault();
var time = $(this).data('time');
console.log($(this).text() + ' == ' + time);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pull-right" class="publish-history-comment">
Publish
</div>
<div class="pull-right" class="hide-history-comment">
Hide
</div>
<script type="text/javascript">
$('a').on('click', function(e) {
e.preventDefault();
var time = $(this).data('time');
});
</script>
I'm looking at running this script:
$(document).ready(function() {
$('a').click(function(e) {
var urlyep=(this)
e.preventDefault();
$("#content").load($(urlyep).attr('href'));
});
});
This loads content from a local HTML file via a menu hyperlink into the #content div. It works great but I want to make it more specific so it only works when the click is made in the #menubar div.
Err… You mean $('#menubar a').click(…) ?
<script type="text/javascript">
$(document).ready(function() {
$('#menubar a').click(function(e) {
var urlyep=(this)
e.preventDefault();
$("#content").load("yourexternalpage.html");
});
});
</script>
<div id="content" >new content will go here</div>
<div id="menubar" >menubar</div>
If you have more than one link on the menu bar, I am assuming you have, each needing to load it's own content/page you could do something like the following.
<script type="text/javascript">
$(document).ready(function() {
$('#menubar a').click(function(e) {
var urlyep=(this.name);
e.preventDefault();
$("#content").load(urlyep);
});
});
</script>
<div id="content" >new content will go here</div>
<div id="menubar" ><a href="#" name="page1.php" >menubar link1</a>-<a href="#" name="page2.php" >menubar link2</a></div>