Question

我的目标是创建一个包含互动视频的网页，在此搜索时，我发现了一个指向jsFiddle that suits my needs.的链接

由于代码在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 个答案: