0

我不是 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>

当然还有 tabs.js 文件：

$('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');

    }
});

同样，我对 js 不太了解，所以我确信这与此有关，但现在我被卡住了，无法弄清楚。

4

3 回答 3

1

您需要将您的陈述包装在一个准备好的陈述中..即

$(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) {
于 2013-04-30T11:40:49.967 回答
0

尝试使用这个jquery ui tabs。您将在提供的链接中找到您需要的所有代码以及如何应用它的说明

于 2013-04-30T11:12:42.383 回答
0

您需要在 Tab 标题上添加 Click 处理程序，而不是在正文上

$("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" />
于 2013-04-30T11:13:04.230 回答