2

试图查看所有其他关于为什么这不起作用的问题，没有运气。我在我的标题中加载这个：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

这是我的脚本：

$(document).ready(function() {
    $("#knee-tab").hide();
    $("#shoulder-tab").hide();
});
$(function () {
    $("#patient-portal-link").click (function (event) {
        $("#patient-portal-tab").show();
        $("#knee-tab").hide();
        $("#shoulder-tab").hide();
    });
}); 
$(function () {
    $("#knee-link").click (function (event) {
        $("#patient-portal-tab").hide();
        $("#knee-tab").show();
        $("#shoulder-tab").hide();
        }); 
}); 
$(function () {
    $("#shoulder-link").click (function (event) {
        $("#patient-portal-tab").hide();
        $("#knee-tab").hide();
        $("#shoulder-tab").show();
    }); 
});

以下是用于调用脚本的链接：

<ul>
<li><a id="#patient-portal-link">Patient Portal</a></li>
<li><a id="#knee-link">Knee</a></li>
<li><a id="#shoulder-link">Shoulder</a></li>
</ul>

然后我有三个 div，它们的名称如下：

<div id="patient-portal-tab">Patient portal content</div>
<div id="knee-tab">Knee content</div>
<div id="shoulder-tab">Shoulder content</div>

和div 在页面加载时正确隐藏knee，shoulder但链接什么也不做。我正在使用谷歌浏览器，在检查元素时，我没有收到关于 javascript 的错误报告。我究竟做错了什么？

4

5 回答 5

10

#从您的 ID 值中删除字符。jQuery 中的#字符表示元素的 ID，因此您需要两个#' ( ##knee-tab) 才能工作。

于 2012-07-17T20:29:10.037 回答
2

您确定在 ID 前面有 # 符号吗？像这样重写它，它会工作

<li><a id="patient-portal-link">Patient Portal</a></li>
<li><a id="knee-link">Knee</a></li>
<li><a id="shoulder-link">Shoulder</a></li>
于 2012-07-17T20:29:49.303 回答
1

您的问题出在您的 HTML 代码中。HTML 中的 id 不需要哈希“#”。

于 2012-07-17T20:32:43.453 回答
1

$(function() ... )$(document).ready(function() ...)如果我没记错的话，这只是简写。所以你使用了太多的就绪调用。试试这个：

$(document).ready(function() {
    $("#knee-tab").hide();
    $("#shoulder-tab").hide();

    $("#patient-portal-link").click (function (event) {
        $("#patient-portal-tab").show();
        $("#knee-tab").hide();
        $("#shoulder-tab").hide();
    });{

    $("#knee-link").click (function (event) {
        $("#patient-portal-tab").hide();
        $("#knee-tab").show();
        $("#shoulder-tab").hide();
        }); 

    $("#shoulder-link").click (function (event) {
        $("#patient-portal-tab").hide();
        $("#knee-tab").hide();
        $("#shoulder-tab").show();
    }); 

});
于 2012-07-17T20:33:16.767 回答
0

点击这里

检查此代码中的此小提琴您已在 id 中输入了额外的 # 将您以前的 html 覆盖为小提琴中给出的 html 代码

于 2014-11-26T10:53:05.050 回答