个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 02:09:13 24 4
gpt4 key购买 nike

我的目标是制作一个带有交互式视频的网页，在此处搜索时，我发现了一个指向 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>

最佳答案

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

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

它在 fiddle 上工作的原因是，jsFiddle 自动将您的代码包装在准备好的处理程序中 - 他们是左侧的选择框来选择

关于javascript - 代码无法在 Dreamweaver 中的 jsFiddle 之外工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17349521/

24 4 0
文章推荐： html - 单击单选按钮更改文本
文章推荐： jquery - 幻灯片动画后过渡上部div
文章推荐： html - CSS margin 恐怖； Margin 在父元素之外添加空间
文章推荐： javascript - 我如何允许用户将文件上传到我的站点，对其进行编辑并将其保存回来
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com