如何在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>

这种方法远非完美，但可以快速解决。