We Keep Coding

Empty href is not working with javascript

I searched the forum for this and I cannot find a solution to my problem. If I missed something please point me to the right thread.
I have three divs that replace each other onclick.
Here's my HTML:
<div id="a">AAAA <a id="showa" href="javascript:void(0)">Show A</a></div>
<div id="b">BBBB <a id="showb" href="javascript:void(0)">Show B</a></div>
<div id="c">CCC <a id="showc" href="javascript:void(0)">Show C</a></div>
And I am using this javascript to achieve this:
function ReplaceDivs(a,b,c){
$("#showa").on('click', function(e){
e.preventDefault();
e.stopPropagation();
$("#b").show();
$("#a").hide();
$("#c").hide();
});
$("#showb").on('click', function(e){
e.preventDefault();
e.stopPropagation();
$("#c").show();
$("#b").hide();
$("#a").hide();
});
$("#showc").on('click', function(e){
e.preventDefault();
e.stopPropagation();
$("#a").show();
$("#b").hide();
$("#c").hide();
});
I am using preventDefault and I also tried entering by entering javascript:void(0) but my code is still not working.
It's working without a problem when I am testing it on fiddle.
You can see my example here
You can see the actual page here
What I am missing?
Also, I was wondering if there's a way to add animation so the divs show/hide nicer. This is the first time I am working on javascript so I don't really know where to start on this.

The code on your actual page is <a id="showa" href="">Show A</a>. A blank href equals a link to self. You need this:
This is the preferred way for links without an action.

I had the exact same problem. The solution in my case was fixing the path to jquery source.
Before
<script src="scripts/vendors.js"></script>
After
<script src="/scripts/vendors.js"></script>
Added a slash in the path before scripts/...
I got this problem when I created a new page-> typed in the source path-> picking up the source path.
But it worked fine without the front slash in other sample prebuild pages that i got as template. Yet to figure out the resaon for that.

Try using # for the value of your href.

Change an image on click with Javascript, but still following the link

I have the following html
<a href="email.html" target="_blank" ><img src="../img/mailto.gif" alt="Send email" id='email'/></a>
Clicking the image should open a new window and you should now if that image has been clicked on before, simply because it would change when you click on it.
This is also included in a table created with PHP from a MySQL table (basically, this means I will get a new image in every row and I can only change their ID's globally, not one by one..)
After adding this jquery code the link stopped working. Which means that, when I click on the image it changes to a different one (.../img/mailto_onclick.gif) and that's fine, but the email.html page doesnt open in a new tab like it used to...
<script language="javascript">
$(document).ready(function() {
$('#email').click(function(){
$(this).attr('src',"../img/mailto_onclick.gif");
return false;
});
});
</script>
Any thought's on how to get this working?
Sorry if it's some basic or obvious stuff

Remove return false as it will prevent the default behavior for click() because <img> is wrapped inside <a></a>.
$('#email').click(function(){
$(this).attr('src',"../img/mailto_onclick.gif");
// return false; // remove
});

Try this:
<script language="javascript">
$(document).ready(function() {
$('#email').click(function(){
$(this).attr('src',"../img/mailto_onclick.gif");
//return false;
});
});
</script>

jquery ajax load content from a button that is inside the container

I'm using jQuery and ajax to load pages without reloading the entire website and I ran into a problem.
This is the jquery script:
$(function(){
$("a[rel='tab']").click(function(e){
e.preventDefault();
//get the link location that was clicked
pageurl = $(this).attr('href');
//to get the ajax content and display in div with id 'content'
if(pageurl!=window.location){
$.ajax({url:pageurl+'?rel=tab',success: function(data){
$('#main-wrap').html(data);
}});
}
//to change the browser URL to 'pageurl'
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
return false;
});
});
/* the below code is to override back button to get the ajax content without reload*/
$(window).bind('popstate', function() {
$.ajax({url:location.pathname+'?rel=tab',success: function(data){
$('#main-wrap').html(data);
}});
});
and the html code is something like this:
<div class="nav">Page 1</div>
<div class="ajax-content">
<div class="title">Title</div>
</div>
Now if I click "Page 1" that is outside the div where the ajax content is loaded it's working but if I click "Title" that is inside the div, the whole page is reloaded(ajax not working).
It's possible to make that "Title" link(which is inside the div where the ajax content is loaded) to work?

The actual problem is that you are adding the event handler to all a[rel='tab'] on document ready, but you are loading the target <a> after the fact. That means that they will not have the event handler bound to their click. You should use something like live or more importantly on. The importance is event delegation, where you would use something like:
$("#container").on("click", "a[rel='tab']", function () {
// Your code
});
This way, any a[rel='tab'] that is removed or added inside of the #container element has this event handler attached to it.

Set your href attribute to # and add a return false;
Try this:
<div class="title">Title</div>

I would just ditch the inner link if you're already scripting it, and instead put the url in a data-url attribute. Then you don't have to worry about covering your tracks with any default behavior. Your div would look like this:
<div class="title" id='link_btn' data-url="title_page.html">Title</div>
Then rework your code like this:
("#link_btn").click(function(){
//get the link location that was clicked
pageurl = $(this).attr('data-url');
Data attributes are a great way to pass data between elements and your script. You just have to be careful when you create them as special characters and quotes can mess them up and make them unreadable.

what's a better way to write javascript:void(0)?

What's a better or correct way to write the following:
click here

If you're using jQuery, the proper way would be:
html
Link
jQ
$('a').click(function(e){ e.preventDefault(); $('p').show(); });

Just omit the href entirely:
<a onclick ="$('p').show()>click here</a>

Since you're using jQuery, use it at its full potential:
<a id="your-id">click here</a>
<script>
$('#your-id').click(function() {
$('p').show();
});
</script>

Use # and return false in the onclick handler.
return false prevents the URL from being followed. An anchor to # points to the current page, so that it makes sense to open/bookmark the link.
click here

The semantically correct thing to do here is to use a button tag instead of an a tag. It is bad practice to use javascript:void(0) in a link. Shoot, it's bad practice to include any inline JavaScript.

Let it point to an URL which will make the desired element to show up by a server side view technology such as PHP/JSP/ASP so that the link still works for clients who have JS disabled.
E.g. in JSP:
link
<p class="bar ${param.foo != 1 ? 'hide' : ''}">paragraph</p>
with
$(".foo").click(function() {
$(this).next(".bar").show();
return false;
});

HTML anchor tag with Javascript onclick event

On using Google I found that they are using onclick events in anchor tags.
In more option in google header part, it looks like normal a tag, but onclicking it doesn't get redirected but opened a menu. Normally when using
<a href='more.php' onclick='show_more_menu()'>More >>></a>
It usually goes to 'more.php' without firing show_more_menu(), but I have show a menu in that page itself. How to do like google?

If your onclick function returns false the default browser behaviour is cancelled. As such:
<a href='http://www.google.com' onclick='return check()'>check</a>
<script type='text/javascript'>
function check()
{
return false;
}
</script>
Either way, whether google does it or not isn't of much importance. It's cleaner to bind your onclick functions within javascript - this way you separate your HTML from other code.

You can even try below option:
More >>>

From what I understand you do not want to redirect when the link is clicked.
You can do:
<a href='javascript:;' onclick='show_more_menu();'>More ></a>

Use following code to show menu instead go to href addres
function show_more_menu(e) {
if( !confirm(`Go to ${e.target.href} ?`) ) e.preventDefault();
}
More >>>

One more solution that prevents default action even if the javascript function returns any value.
<a href="www.any-website.com" onclick='functionToRun();return false;'>

1) Link to work
<a href="#" onClick={this.setActiveTab}>
...View Full List
</a>
setActiveTab = (e) => {
e.preventDefault();
console.log(e.target);
}