如何在html超鏈接中調用函數

Question

好的，我在這里已經解決了很多問題，我從這些問題中得到了最大的收獲，但似乎仍然無法解決。 （我是JavaScript / jQuery的新手。）

這是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();
}

我試圖使每個鏈接僅顯示具有相應類的div，而其他鏈接應被隱藏。 （我意識到現在我忘了給鏈接名稱顯示相應的類，但這不能解決我的問題）我單擊該鏈接，根本不會隱藏任何內容，並且控制台中沒有錯誤，所以我真的沒有知道從哪里開始進行故障排除。

解決方案不得包含#tags，因為我需要在多個不同的部分和容器上重用該類。 我的網站上還有其他可運行的JavaScript，因此jquery的鏈接不會成為問題。 我的代碼中必須包含其他內容，以防止下面的所有有效解決方案在我的網站上起作用。

Answer 1

您可以執行以下操作：

完整演示

<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

我寧願使用id並將click事件移動到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

如果錨文本可以等於（區分大小寫）對應的div類，則簡單的解決方案可以是：

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

你可以試試

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

這種方法遠非完美，但可以快速解決。