How to call a function inside an html hyperlink

Question

Okay, I've scavenged quite a few questions on here and I've taken what I could from those but it still seems to not be working. (I am fairly new to JavaScript/jQuery.)

Here is the jsFiddle: https://jsfiddle.net/5ffhoqpt/1/

var showPhotography = function () {
    $(".design").hide();
    $(".film").hide();
    $(".web").hide();
}

var showDesign = function () {
    $(".photography").hide();
    $(".film").hide();
    $(".web").hide();
}
var showWeb = function () {
    $(".design").hide();
    $(".film").hide();
    $(".photography").hide();
}

var showFilm = function () {
    $(".design").hide();
    $(".photography").hide();
    $(".web").hide();
}

I'm trying to get each link to show only the div's with the corresponding class, and the other ones should be hidden. (I realize now I have forgotten to show the corresponding class to the link name, but that won't fix my issue)I click the link and nothing will be hidden at all and there's no errors in the console so I really don't know where to begin troubleshooting.

The solution must not include #tags as I need the class to be reused on multiple different sections and containers. I also have other working javascript on my site so the linking of jquery can't be an issue. It must be something else within my code preventing all of the working solutions below to work on my site.

Answer 1

You can do something like this:

Full demo

<a href="" data-action="showPhotography">Photography</a>

var showPhotography = function () {
        $(".design").hide();
        $(".film").hide();
        $(".web").hide();
    }

var showDesign = function () {
    $(".photography").hide();
    $(".film").hide();
    $(".web").hide();
}
var showWeb = function () {
    $(".design").hide();
    $(".film").hide();
    $(".photography").hide();
}

var showFilm = function () {
    $(".design").hide();
    $(".photography").hide();
    $(".web").hide();
}

var actions = {
    showPhotography: showPhotography,
  showDesign: showDesign,
  showWeb: showWeb,
  showFilm : showFilm
}

$("[data-action]").on('click', function(e) {
  e.preventDefault();
  var action = $(this).data('action');
  actions[action]()
});

Answer 2

 function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } 

 <nav> <ul> <li> <a href="" onclick="toggle_visibility('Photo');">Photo</a> </li> <li> <a href="" onclick="toggle_visibility('Design');">Design</a> </li> <li> <a href="" onclick="toggle_visibility('Web');">Web</a> </li> <li> <a href="" onclick="toggle_visibility('Film');">Film</a> </li> </ul> </nav> <div id="Film" style="display: none;"> <p> Film Stuff </p> </div> <div id="Photo" style="display: none;"> <p> Photography Stuff </p> </div> <div id="Web" style="display: none;"> <p> Web Stuff </p> </div> 

Answer 3

I would rather use id and move click event into jQuery

 $("#someId1").click(function () { $(".design").hide(); $(".film").hide(); $(".web").hide(); }); $("#someId2").click(function () { $(".photography").hide(); $(".film").hide(); $(".web").hide(); }); $("#someId3").click(function () { $(".design").hide(); $(".film").hide(); $(".photography").hide(); }); $("#someId4").click(function () { $(".design").hide(); $(".photography").hide(); $(".web").hide(); }); 

 <nav> <ul> <li> <a href="" id="someId1">Photography</a> </li> <li> <a href="" id="someId2">Design</a> </li> <li> <a href="" id="someId3">Web</a> </li> <li> <a href="" id="someId4">Film</a> </li> </ul> </nav> <div class="film"> <p> Film Stuff </p> </div> <div class="photography"> <p> Photography Stuff </p> </div> <div class="Web"> <p> Web Stuff </p> </div> <div class="Design"> <p> Design Stuff </p> </div> 

Answer 4

If the anchor text can be equal (case sensitive) to the corresponding div class a simple solution can be:

 // on document ready $(function() { // for each anchor...listen click event $('a').on('click', function(e) { // prevent default action: link --> goto another page or... e.preventDefault(); // hide all div $('div').hide(); // show current div $('div.' + this.textContent).show(); }).eq(0).trigger('click'); // get the first div and simulate the click event in order to start with all hidden except the first div... }); 

 <!-- include jQuery library before using.... --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <ul> <li> <a href="">Photography</a> </li> <li> <a href="">Design</a> </li> <li> <a href="">Web</a> </li> <li> <a href="">Film</a> </li> </ul> </nav> <div class="Film"> <p> Film Stuff </p> </div> <div class="Photography"> <p> Photography Stuff </p> </div> <div class="Web"> <p> Web Stuff </p> </div> <div class="Design"> <p> Design Stuff </p> </div> 

Answer 5

You could try

<a href=javascript:function(args);>Link</a>

This approach is far from perfect, but is nice for a quick fix.