Develop Reference

Clicking on an empty anchor link sends the user to the top of the page

I have two empty anchor links <a href="#"> that are used to create tabs. Please take a look at my jsFiddle:
https://jsfiddle.net/MrSnrub/cuuy5cbp/
The problem is that the user goes to the very top of the page when going from tab to tab. I would use jQuery-UI's tabs, but I have the same HTML element for each tab, and think jQuery-UI's tabs force you to have different HTML elements in each tab.
I want to use these tabs further down my page, and making the user scroll down after every tab switch is not user-friendly. How do I fix this?
UPDATE: If I click on "Tab 1" to activate it, I shouldn't be able to hit the Tab key on my keyboard and Tab 2 is now highlighted.

Use <a href="javascript:void(0)">.
https://jsfiddle.net/obybyvds/
Here's an explanation of why that works

You can use href="#/". It should prevent this behavior from happening.

You could set the href to javascript:;
Tab 1
Or keep the href="#" and simply event.preventDefault() on click using this JavaScript:
[].forEach.call(document.querySelectorAll("[href='#']"), function(el) {
el.addEventListener("click", function(e){
e.preventDefault();
}, false);
});
jsFiddle
or in jQuery:
$(document).on("click", "[href='#']", function(e) {
e.preventDefault();
});

How to disable a button until another button is clicked in jQuery?

I'm trying to write some jQuery to disable my registration button unless my survey button has been clicked (which opens a modal window). Can anyone help me?
I need users to click the popup survey button before they press the main registration button.
All I really have at the moment is the jQuery to disable the register button:
jQuery(document).ready(function($) {
$("#registerButton").attr('disabled', 'disabled');
});
The class for my survey button is: .btn-survey

You can try the following
jQuery(document).ready(function($) {
$("#registerButton").attr('disabled', 'disabled');
$("#surveyButton").click(function(){
$("#registerButton").removeAttr("disabled"); // removing attribute
})
});

Just like how you disabled it in the first place.
$('.btn-survey').click(function() {
$('#registerButton').removeAttr('disabled');
});

Simulating link click without interaction with user in jquery?

Wanna simulate a click on href element, but without redirect the page on browser. Actually without the user's knowledge. How can I achieve this?
Example:
var books = new Array();
$('p.tree_item_leaf').each(function(){
books.push($(this).find('a').attr('href'));
})
// for each book I wanna get the link and 'simulates' a click such that I can get the loaded content returned from the link in a variable
Thanks in advance!

Your remote click needs to be triggered somehow. In this example its being done by the click-this button
HTML:
<div class="myDiv" style="color: red;">Clicking this should open google even though this doesn't have an href</div>
<a class= "click-this" href="https://www.google.com">click this</a>
JS:
$(".myDiv").on("click mousedown mouseup focus blur keydown change", function(e) {
$link = $(".click-this");
console.log($link);
$(".click-this")[0].click();
});
jsFiddle: https://jsfiddle.net/0oecovtj/1/

On click, click something else, prevent default. How do I do this properly with jQuery?

What I want to happen is, when you click a link (id="dontFollow"), it triggers a click on a different link(id="follow") and stops you from following the original link.
This is how I thought it should be done-
$("#dontFollow").click(function(e){
$("#follow").click();
e.preventDefault();
});
... but it's not working. Whats wrong with my code?
UPDATE:
This is a little more tricky than I originally explained. It appears that I need to "click" on the other link to trigger some other events to cause my page to slide to the anchor. Your suggestions for "window.location" does change the window location but it's not triggering my slide events.

$("#dontFollow").click(function(){
window.open($("#follow").attr('href'));
return false;
});

just return false

Simply have the function return false;

I don't think you can "click a link" programmatically, you can however navigate by setting window.location.href
$('#dontFollow').attr('href','#').click(function(){
window.location.href = $('#follow').attr('href');
});

Your code is correct. Using e.preventDefault() will prevent you from following the link being clicked.
You have't stated what specifically isn't working, but if you're trying to visit the href of the other link, then do this:
$("#dontFollow").click(function(e){
window.location = $("#follow").attr('href');
e.preventDefault();
});

JS Drop Down menu with submit button

I need to implement a drop down menu like the one in the image. I know how to accomplish something like this when there is no 'go' button but how would I do this with the the 'go' button? Is there a way to allow the user to select a link but not trigger it unless the user clicks the go button? Is there a jquery plugin or something for this kind of behavior?
Im not very good with JS, so sample snippets to illustrate your suggestions will go a long way to helping me understand - thanks!

You can prevent the default behavior of the links, like this:
$(document).ready(function() {
$("#menu a").click(function(event) {
event.preventDefault();
});
});
So the user won't be redirected when choosing the link, but won't break that behavior in case he wants to open it in a new tab/window, which is cool.
And for redirecting the user when he clicks, you can just attach an event to the GO button which finds the selected a, takes its href, and set the current location to it's value.

You could do something like this:
$("#menu a").click(function(event) {
$("#menu a").removeClass('selected');
$(this).addClass('selected');
return false;
});
Then:
$("#buttonid").click(function(event) {
window.location.href = $("#menu a.selected").attr('href');
});