Question

亲爱的，我检查了所有问题，但是JSfiddle没有在实际文件中工作。 JSFIDDLE位于http://jsfiddle.net/Qac6J/1/

以下是我的代码，请告诉我这是什么问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="qtip/jquery-2.0.3.min.js"></script>
<link type="text/css" rel="stylesheet" href="qtip/jquery.qtip.min.css" />


<script>
$(document).ready(function() {

    $('.trigger').click(function() {
        $('.content').hide();
        $('.' + $(this).data('rel')).show();
    });
});
</script>

<style type="text/css">
.content {
    display: none;
}
</style>


</head>
<body>

<form id='group'>
    <label>
        <input type="radio" name="group1" class="sim-micro-btn trigger" data-rel="sim-micro-desktop" />
    </label>
    <label>
        <input type="radio" name="group1" class="sim-mini-btn trigger" data-rel="sim-mini-desktop" />
    </label>
    <label>
        <input type="radio" name="group1" class="sim-maxi-btn trigger" data-rel="sim-maxi-desktop" />
    </label>
    <label>
        <input type="radio" name="group1" class="sim-mega-btn trigger" data-rel="sim-mega-desktop" />
    </label>
        <input type="radio" name="group1" class="sim-mega-btn trigger" data-rel="sim-mega-desktop" />
    </label>
</form>

<div class="billpay-internet-add-ons">
    <div class="sim-micro-desktop content">sim-micro</div>
    <div class="sim-mini-desktop content">sim-mini</div>
    <div class="sim-maxi-desktop content">sim-maxi</div>
    <div class="sim-mega-desktop content">sim-mega</div>
</div>


</body>
</html>

Answer 1

jquery文件路径可能有问题，所以使用jQuery CDN

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

并且data- *属性是HTML5中的新属性。所以尽量使用声明<!DOCTYPE html>

Answer 2

要添加Manoj的答案，问题肯定是因为您指定了错误的文件路径，因为CDN版本修复了您的问题。

如果您愿意，可以使用Manoj提供的CDN版本，但请记住，如果您想要包含本地副本，这始终是一个选项。

在你的脑海里，你有：

<script type="text/javascript" src="qtip/jquery-2.0.3.min.js"></script>

为了使其正常工作，您的filetree需要看起来像这样

enter image description here

这是因为您从文档中指定了相对路径，因此请求的任何文件夹都将从包含它的html文件开始。我很愿意这样是不您的服务器的情况，并且您在其他地方有qtip文件夹

要设置绝对路径，您应该使用/引导文件位置，以指定要从中开始的根文件夹。

例如，如果您有如下设置，

enter image description here

您将通过/qtip/jquery-2.0.3.min.js的绝对路径获取jquery文件这是一个很好的做法，尤其是在命名常用文件（如jquery）时，因此您不需要为每个html文档指定不同的路径。

Answer 3

复制并粘贴下面的代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>


<script type="text/javascript" >
$(document).ready(function() {

    $('.trigger').click(function() {
        $('.content').hide();
        $('.' + $(this).data('rel')).show();
    });
});
</script>

<style type="text/css">
.content {
    display: none;
}
</style>


</head>
<body>

<form id='group'>
    <label>
        <input type="radio" name="group1" class="sim-micro-btn trigger" data-rel="sim-micro-desktop" />
    </label>
    <label>
        <input type="radio" name="group1" class="sim-mini-btn trigger" data-rel="sim-mini-desktop" />
    </label>
    <label>
        <input type="radio" name="group1" class="sim-maxi-btn trigger" data-rel="sim-maxi-desktop" />
    </label>
    <label>
        <input type="radio" name="group1" class="sim-mega-btn trigger" data-rel="sim-mega-desktop" />
    </label>
        <input type="radio" name="group1" class="sim-mega-btn trigger" data-rel="sim-mega-desktop" />
    </label>
</form>

<div class="billpay-internet-add-ons">
    <div class="sim-micro-desktop content">sim-micro</div>
    <div class="sim-mini-desktop content">sim-mini</div>
    <div class="sim-maxi-desktop content">sim-maxi</div>
    <div class="sim-mega-desktop content">sim-mega</div>
</div>


</body>
</html>

JS正在使用JSFiddle而不是Real File

3 个答案: