如何調用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的與相應的類，和其他的人應該隱藏起來。 （我意識到現在我已經忘記顯示相應的類的鏈接名稱，但這不會解決我的問題）我點擊鏈接，什麼都不會被隱藏，並且控制檯中沒有錯誤，所以我真的沒有知道從何處開始故障排除。

該解決方案不得包含＃標籤，因爲我需要該類在多個不同的部分和容器上重用。我也有其他工作的JavaScript在我的網站上，所以jQuery的鏈接不能是一個問題。它必須是我的代碼中的其他內容，以防止下面的所有工作解決方案在我的網站上運行。

Answer 1

你可以做這樣的事情：

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

我寧願用ID和移動點擊事件到jQuery的

$("#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

如果錨文本可以等於（區分大小寫）到相應的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 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

你可以嘗試

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

這種方法遠非完美，但對於快速修復很不錯。