代码无法在Dreamweaver中的jsFiddle之外工作

Question

我的目标是制作一个包含交互式视频的网页，在这里搜索时，我遇到了一个指向适合我的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>

Answer 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自动将您的代码包装在就绪处理程序中- 左侧的选择框是

代码无法在Dreamweaver中的jsFiddle之外工作

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-06-27 17:25:14

代码无法在Dreamweaver中的jsFiddle之外工作

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-06-27 17:25:14

解决方案1
1 已采纳 2013-06-27 17:25:14