Can'；t让选项卡在HTML&；中工作；JavaScript_Javascript_Html

Can'；t让选项卡在HTML&；中工作；JavaScript

javascript html

Can'；t让选项卡在HTML&；中工作；JavaScript,javascript,html,Javascript,Html,我不是一个JavaScript的人，所以我在尝试做什么时有点困难。我们有一个html页面，应该显示产品3个不同细节的“选项卡”：描述、细节和返回。我可以使选项卡正确显示，但当我单击选项卡标题时，JavaScript不会更改为选项卡这是我的html，非常基本： <html> <head> <link rel="stylesheet" href="skeleton.css"> <link rel="stylesheet" href="la

我不是一个JavaScript的人，所以我在尝试做什么时有点困难。我们有一个html页面，应该显示产品3个不同细节的“选项卡”：描述、细节和返回。我可以使选项卡正确显示，但当我单击选项卡标题时，JavaScript不会更改为选项卡

这是我的html，非常基本：

<html>
<head>
    <link rel="stylesheet" href="skeleton.css">
    <link rel="stylesheet" href="layout.css">
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <br><br><br>
    <ul class="sans tabs"> 
        <li>
            <a class="active" href="#tabinfo" style="fonrt-weight:normal">Description</a>
        </li>
        <li>
            <a href="#tabdetails" style="fonrt-weight:normal;color:#999">Details</a>
        </li>
        <li>
            <a href="#returns" style="fonrt-weight:normal;color:#999">Delivery & Returns</a>
        </li>
    </ul>
    <ul class="tabs-content"> 
        <li class="active" id="tabinfo">
            <p>A description of the product would go here.  A description of the product would go here.  A description of the product would go here.  
            A description of the product would go here.  A description of the product would go here.  A description of the product would go here.  A description of the product would go here.</p>
        </li>
        <li id="tabdetails">
            <ul>
                <li>Detail #1</li>
                <li>Detail #2</li>
                <li>Detail #3</li>
                <li>Detail #4</li>
                <li>Detail #5</li>
                <li>etc.</li>
            </ul>
        </li>
        <li id="returns">
            <p>Details about returning a product would go here.</p>
            <p>Details about returning a product would go here.</p>
            <p>See <a href="/somelink/">Delivery & Returns</a> for more information.</p>
        </li> 
    </ul>
    <script src="tabs.js"></script>
</body>
</html>

再说一次，我对js了解不多，所以我肯定这与js有关，但现在我被卡住了，弄不清楚。试试用这个。您将在提供的链接中找到所需的所有代码以及如何应用这些代码的说明。

您需要在选项卡标题而不是正文中添加单击处理程序

$("body ul.tabs li").click(function() {
  // the function goes here.
});

这是假设您正在使用jQuery。如果您还没有使用它，您应该将其添加到head部分下

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />

您需要将您的语句包装在就绪语句中。。i、 e

$(document).ready(function(e) {

    $('body').on('click', 'ul.tabs > li > a', function(e) {

        //Get Location of tab's content
        var contentLocation = $(this).attr('href');

        //Let go if not a hashed one
        if(contentLocation.charAt(0)=="#") {

            e.preventDefault();

            //Make Tab Active
            $(this).parent().siblings().children('a').removeClass('active');
            $(this).addClass('active');

            //Show Tab Content & add active class
            $(contentLocation).show().addClass('active').siblings().hide().removeClass('active');

        }
    });

});

这也可以整理一下：

$('body').on('click', 'ul.tabs > li > a', function(e) {

可能成为

$('.tabs').on('click', 'a', function(e) {

您包含了tabs.js，它似乎依赖于一些jQuery代码，但您没有包含您需要的jQuery.js文件。什么是“tabs.js”？你有链接吗？我为你创建了一个JSFIDLE，但是没有更多信息，我就不能继续了。右键单击，另存为网页。为什么不尝试链接到实际的外部文件，看看它是否有效？在external resources（外部资源）菜单中，向fiddle和view Source添加/显示我按照您的建议进行了更改，但现在我的页面根本无法呈现。我相信这与jquery.min.js链接有关，因为如果我删除它（只是为了测试目的），页面将呈现？？？如果您不是通过http/s查看页面，则需要将其添加到

src

属性中。。因此，将

src=“//

更改为

src=“http://

也不是所有浏览器都允许自动关闭脚本标记；对于这些提示来说，错误概率更小……这使得页面能够正确呈现，但是，当单击任何选项卡时，它仍然不会改变。我是否遗漏了什么？我不确定这是否只是问题或文件本身的一个输入错误，但是的，这肯定会导致问题。我也无法决定，但其余部分看起来还行，所以我认为它一定是beenI的。如果没有勾号，我无法正确渲染第一行，它将以纯文本显示，因此，我使用它们只是为了让代码显示……在js中，它们不包括在内。这就是问题所在……如果没有

.ready

行代码，

标记会被删除。非常感谢@DannyHearnah和@Xotic750帮助我解决了这个问题！

$('.tabs').on('click', 'a', function(e) {