1

我的目标是制作一个包含交互式视频的网页，在这里搜索时，我遇到了一个指向适合我需要的 jsFiddle 的链接。

由于代码在 jsFiddle 上运行良好，因此当我尝试将其复制到 DreamWeaver 时它崩溃了（似乎 JavaScript 已停止工作）。

我把它们放在一起：

<html>
<head>

<style>
div.tab-headers>a
{
    display: inline-block;
    width: 50px;
    background-color: #eee;
    padding: 10px;
    border: 1px solid #666;
}

div.tab
{
    height: 400px;
    width: 100%;
    border: 1px solid #666;
    background-color: #ddd;
    padding: 10px;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$("div.tab-headers>a").click(function () {
    // Grab the href of the header
    var _href = $(this).attr("href");

    // Remove the first character (i.e. the "#")
    _href = _href.substring(1);

    // show this tab
    tabify(_href);
});

function tabify(_tab) {
    // Hide all the tabs
    $(".tab").hide();

    // If valid show tab, otherwise show the first one
    if (_tab) {
        $(".tab a[name=" + _tab + "]").parent().show();
    } else {
        $(".tab").first().show();
    }
}

// On page load...
$(document).ready(function () {
    // Show our "default" tab.
    // You may wish to grab the current hash value from the URL and display the appropriate one
    tabify();
});
</script>
</head>

<body>

<div class="tab-headers">
    <a href="#tab1">T1</a>
    <a href="#tab2">T2</a>
    <a href="#tab3">T3</a>
<div>


<div class="tab">
    <a name="tab1">tab 1</a>
    Tab contents
</div>
<div class="tab">
    <a name="tab2">tab 2</a>
    Tab contents
</div>
<div class="tab">
    <a name="tab3">tab 3</a>
    Tab contents
</div>
</body>
</html>
4

1 回答 1

1

您需要在文档就绪处理程序中移动点击处理程序代码 -

$(document).ready(function () {
    $("div.tab-headers>a").click(function () {
        // Grab the href of the header
        var _href = $(this).attr("href");

        // Remove the first character (i.e. the "#")
        _href = _href.substring(1);

        // show this tab
        tabify(_href);
    });
    tabify();
});

它适用于小提琴的原因是，jsFiddle 会自动将您的代码包装在准备好的处理程序中 -它们是左侧的选择框以供选择

于 2013-06-27T17:25:14.223 回答