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

你可以这样做：

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

我宁愿使用 id 并将点击事件移动到 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

你可以试试

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

这种方法远非完美，但很适合快速修复。

Answer 5

如果锚文本可以等于（区分大小写）对应的 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>