Javascript链接停止工作，可以'；我不明白为什么

我有一个网站，它使用js在两个不同的导航菜单之间切换。一直到一周前我都不知道为什么。想知道这里是否有人能指出一些我没有看到的东西

以下是我的标记：

<div class="catMenu">
    <a href="javascript:showonlyone('newboxes1');">Works</a>
</div>

<div class="newboxes" id="newboxes1" style="display:block;" >
    ...the 1st menu
</div>

<div class="catMenu2">
    <a href="javascript:showonlyone('newboxes2');" >About</a>
</div>

<div class="newboxes" id="newboxes2"  style="display:none;">
    ...the 2nd menu
</div> 

当我使用firebug查看控制台时，出现以下错误：

ReferenceError: showonlyone is not defined

但是由于我对js缺乏了解，我不完全确定如何解决这个问题

---

有人能解释一下吗？

如果要使用

href=“javascript:showonlyone（）”

调用

showonlyone

函数，您必须在全局范围内定义它，目前它是在

文档.ready（）中定义的

您还可以使用
窗口
关键字显式公开它：

$(document).ready(function() {
    window.showonlyone = function showonlyone(thechosenone) {
       $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show();
          }
          else {
               $(this).hide();
          }
        });
    }
});

试试这个：

$(document).ready(function() {});
    function showonlyone(thechosenone) {
       $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show();
          }
          else {
               $(this).hide();
          }
        });
    }

<div class="catMenu">
    <a id="LinkNewBoxes1" class="ToggleDisplay">Works</a>
</div>

<div class="newboxes" id="NewBoxes1" style="display:block;" >
    ...the 1st menu
</div>

<div class="catMenu2">
    <a id="LinkNewBoxes2" class="ToggleDisplay" >About</a>
</div>

<div class="newboxes" id="NewBoxes2"  style="display:none;">
    ...the 2nd menu
</div> 


$(document).ready(function() {
    $(".ToggleDisplay").click(function(e){ //Event Handler for ToggleDisplay clicks
        var BoxToDisplay = $(this).prop("id").replace("Link", ""); //Removes 'Link' from anchor tags ID and assigns to variable
        $(".newBoxes").each(function(){
            if ($(this).prop("id") == BoxToDisplay) //Check if this is the right one to display
                $(this).show();
            else
                $(this).hide();
        });
       e.preventDefault(); //Prevent browser's default action for anchor clicks
       return false;
    });
});

基于haim770的答案

function showonlyone(thechosenone) {
   $('.newboxes').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).show();
      }
      else {
           $(this).hide();
      }
    });
}

$(document).ready(function() {});

您使用的是jQuery，因此将内联JavaScript从HTML中移出，并使用
data
属性来存储
chosenone
变量。然后，您可以使用jQuery将click方法添加到锚定中，从data属性中获取变量并运行其余代码

HTML

<div class="catMenu">
  <a data-chosen="newboxes1">Works</a>
</div>

虽然您的格式已接近正常工作状态，而且haim770已经显示出问题，但我会在这里稍微更改您的格式。试试这个：

<div class="catMenu">
    <a id="LinkNewBoxes1" class="ToggleDisplay">Works</a>
</div>

<div class="newboxes" id="NewBoxes1" style="display:block;" >
    ...the 1st menu
</div>

<div class="catMenu2">
    <a id="LinkNewBoxes2" class="ToggleDisplay" >About</a>
</div>

<div class="newboxes" id="NewBoxes2"  style="display:none;">
    ...the 2nd menu
</div> 


$(document).ready(function() {
    $(".ToggleDisplay").click(function(e){ //Event Handler for ToggleDisplay clicks
        var BoxToDisplay = $(this).prop("id").replace("Link", ""); //Removes 'Link' from anchor tags ID and assigns to variable
        $(".newBoxes").each(function(){
            if ($(this).prop("id") == BoxToDisplay) //Check if this is the right one to display
                $(this).show();
            else
                $(this).hide();
        });
       e.preventDefault(); //Prevent browser's default action for anchor clicks
       return false;
    });
});


作品
…第一菜单
关于
…第二份菜单
$（文档）.ready（函数（）{
$（“.ToggleDisplay”）。单击（函数（e）{//ToggleDisplay单击的事件处理程序
var-BoxToDisplay=$（this）.prop（“id”）.replace（“Link”，“Link”）；//从锚定标记id中删除“Link”，并分配给变量
$（“.newbox”）。每个（函数（）{
if（$（this.prop（“id”）==BoxToDisplay）//检查是否显示正确的
$（this.show（）；
其他的
$（this.hide（）；
});
e、 preventDefault（）；//防止浏览器对定位点单击的默认操作
返回false；
});
});
谢谢安德鲁

HTML

不确定是否只看一下，但我认为问题在于您在非全局上下文中定义了
showonlyone
，因此链接无法访问该函数。事实上，我认为没有任何方法可以让
$（文档）之外的元素访问它。ready
函数可以访问它。
javascript:
不是必需的。感谢haim770，我删除了
文档。ready（）
函数，它又开始工作了。我可以在7分钟内接受答案；）我不认为建议删除
document.ready（）
。您只需要在DOM就绪时运行该函数。只需将
showonlyone
函数声明移到
document.ready（）之外，或者在我的回答中使用
窗口
解决方案。
<div class="catMenu">
    <a id="LinkNewBoxes1" class="ToggleDisplay">Works</a>
</div>

<div class="newboxes" id="NewBoxes1" style="display:block;" >
    ...the 1st menu
</div>

<div class="catMenu2">
    <a id="LinkNewBoxes2" class="ToggleDisplay" >About</a>
</div>

<div class="newboxes" id="NewBoxes2"  style="display:none;">
    ...the 2nd menu
</div> 


$(document).ready(function() {
    $(".ToggleDisplay").click(function(e){ //Event Handler for ToggleDisplay clicks
        var BoxToDisplay = $(this).prop("id").replace("Link", ""); //Removes 'Link' from anchor tags ID and assigns to variable
        $(".newBoxes").each(function(){
            if ($(this).prop("id") == BoxToDisplay) //Check if this is the right one to display
                $(this).show();
            else
                $(this).hide();
        });
       e.preventDefault(); //Prevent browser's default action for anchor clicks
       return false;
    });
});

<div class="catMenu">
    <a href='#' id="LinkNewBoxes1" class="ToggleDisplay">Works</a>
</div>
<div class="newboxes" id="NewBoxes1" style="display:block;" >
    ...the 1st menu
</div>
<div class="catMenu2">
    <a href='#' id="LinkNewBoxes2" class="ToggleDisplay" >About</a>
</div>    
<div class="newboxes" id="NewBoxes2"  style="display:none;">
    ...the 2nd menu
</div>  

$(".ToggleDisplay").click(function(e){ 
    var BoxToDisplay = $(this).prop("id").replace("Link", ""); 
    $(".newboxes").each(function(){
        //Check if this is the right one to display
        if ($(this).prop("id") == BoxToDisplay) 
            $(this).show();
        else
            $(this).hide();
    });
   e.preventDefault(); 
   return false;
});