So rufen Sie eine Funktion in einem HTML-Hyperlink auf

Question

Okay, ich habe hier einige Fragen geklärt, und ich habe mir genommen, was ich von denen konnte, aber es scheint immer noch nicht zu funktionieren. (Ich bin ziemlich neu in JavaScript/jQuery.)

Hier die jsFiddle ist: 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(); 
} 

Ich versuche, jeden Link zu erhalten nur die divs mit der entsprechenden Klasse zu zeigen, und die andere, die sollte versteckt sein. (Ich merke jetzt, dass ich vergessen habe, die entsprechende Klasse dem Linknamen zu zeigen, aber das wird mein Problem nicht beheben) Ich klicke auf den Link und nichts wird ausgeblendet und es gibt keine Fehler in der Konsole, also tue ich das wirklich nicht wissen, wo Sie mit der Fehlersuche beginnen können.

Die Lösung darf #Tags nicht enthalten, da ich die Klasse für mehrere verschiedene Abschnitte und Container erneut verwenden muss. Ich habe auch andere Arbeiten Javascript auf meiner Website, so dass die Verknüpfung von Jquery kein Problem sein kann. Es muss etwas anderes in meinem Code sein, das verhindert, dass alle unten aufgeführten Arbeitslösungen auf meiner Site funktionieren.

Answer 1

Sie können etwas tun:

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

ich eher id verwenden würde und bewegen Ereignis in jQuery klicken

$("#someId1").click(function() { 
 
\t $(".design").hide(); 
 
\t $(".film").hide(); 
 
\t $(".web").hide(); 
 
}); 
 

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

 
$("#someId4").click(function() { 
 
\t $(".design").hide(); 
 
\t $(".photography").hide(); 
 
\t $(".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 3

Wenn der Ankertext kann eine einfache Lösung für den entsprechenden div class gleich (Groß- und Kleinschreibung) sein kann:

// 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 4

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 5

Sie könnten versuchen Sie

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

Dieser Ansatz ist bei weitem nicht perfekt, aber ist für eine schnelle Lösung schön.