Javascript 如何在html超链接中调用函数

好的，我已经在这里搜集了很多问题，我已经从这些问题中尽了我所能，但它似乎仍然不起作用。（我对JavaScript/jQuery相当陌生。）

以下是JSFIDLE：

我试图让每个链接只显示具有相应类的div，其他链接应该隐藏。（我现在意识到我忘记了显示链接名对应的类，但这并不能解决我的问题）我单击链接，没有任何内容会被隐藏，控制台中也没有错误，所以我真的不知道从哪里开始故障排除

---

解决方案不能包含#标记，因为我需要在多个不同的节和容器上重用该类。我的站点上也有其他可用的javascript，因此jquery的链接不会成为问题。它必须是我的代码中的其他东西阻止下面的所有工作解决方案在我的网站上工作

您可以这样做：

---

我宁愿使用id并将click事件移动到jQuery中

$（“#someId1”）。单击（函数（）{
$（“.design”）.hide（）；
$（“.film”）.hide（）；
$（“.web”）.hide（）；
});
$（“#someId2”）。单击（函数（）{
$（“.photography”）.hide（）；
$（“.film”）.hide（）；
$（“.web”）.hide（）；
});
$（“#someId3”）。单击（函数（）{
$（“.design”）.hide（）；
$（“.film”）.hide（）；
$（“.photography”）.hide（）；
});
$（“#someId4”）。单击（函数（）{
$（“.design”）.hide（）；
$（“.photography”）.hide（）；
$（“.web”）.hide（）；
});












电影素材


摄影材料


网络素材


设计人员

如果锚文本可以与相应的div类相等（区分大小写），则简单的解决方案可以是：


//已准备好文档
$（函数（）{
//对于每个锚点…侦听单击事件
$（'a'）。在（'click'，函数（e）上{
//阻止默认操作：链接-->转到另一页或。。。
e、 预防默认值（）；
//隐藏所有div
$（'div'）.hide（）；
//显示当前div
$（'div.+this.textContent）.show（）；
}).eq（0）.触发器（“单击”）；
//获取第一个div并模拟click事件，以便从除第一个div之外的所有隐藏开始。。。
});












电影素材


摄影材料


网络素材


设计人员


功能切换\u可见性（id）{
var e=document.getElementById（id）；
如果（e.style.display=='block'）
e、 style.display='none'；
其他的
e、 style.display='block'；
}












电影素材


摄影材料


网络素材

您可以试试

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



这种方法远不是完美的，但很适合快速修复。
可能重复我在您的应用程序中遇到的错误jsfiddle@JoeLissner在我的网站上尝试过这种方法，但再次，当我点击“标签”/@adam beck时，什么都没有发生，这是因为我无法让它工作，也不知道如何解决这个问题。问题是当我点击链接时什么也没有发生。@JDM_你说的“控制台中没有错误”。您是否正在使用JSFIDLE进行构建？或者你只是把它作为一个平台来问你的问题？我对jquery一点都不熟悉，大部分是javascript，所以看看jquery，我无法确定函数到底做了什么。在“RunCodeSnippet”中，它工作得非常好，但是当我将jquery复制到脚本中，然后在我正在开发的网站上测试它时，什么都没有发生。还有什么我应该添加到javascript中的吗？我将所有单词改为完全小写，以区分大小写。@JDM_垃圾注释添加到jQuery代码中。从这里开始学习每个jQuery方法/选择器的功能是一个好主意。
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]()
});

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