Question

我不是一个JavaScript人，所以我对我正在做的事情有点困难。我们有一个html页面，应该显示我们产品的3个不同细节的“标签”：描述，详细信息和退货。我可以正确显示选项卡，但是当我单击选项卡标题时，JavaScript不会更改为选项卡。

enter image description here

这是我的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知之甚少，所以我确定这与此有关，但现在我被困住了，无法弄明白。

Answer 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) {

Answer 2

尝试使用此jquery ui tabs。你会找到你需要的所有代码，并在提供的链接中解释如何应用它

Answer 3

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

上

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

这假设你正在使用jQuery。如果你还没有使用它，你应该在头部下面添加它。

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

无法获得在HTML＆amp; JavaScript的

3 个答案: