Javascript JSFIDLE在本地不工作_Javascript_Jquery_Css_Jsfiddle

Javascript JSFIDLE在本地不工作

javascript jquery css

Javascript JSFIDLE在本地不工作,javascript,jquery,css,jsfiddle,Javascript,Jquery,Css,Jsfiddle,我在尝试让我的JSFIDLE在本地正常显示和工作时遇到了一些问题。当我从JSFiddle保存页面源代码时，列间距似乎变小了，JQuery根本不起作用如果有人能帮我，我将不胜感激！非常感谢 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> - jsFiddle de

我在尝试让我的JSFIDLE在本地正常显示和工作时遇到了一些问题。

当我从JSFiddle保存页面源代码时，列间距似乎变小了，JQuery根本不起作用

如果有人能帮我，我将不胜感激！非常感谢

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by kelseyhisek</title>
  <script language="javascript" type="text/javascript" src="jquery.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <style type='text/css'>
    @import url("http://fonts.googleapis.com/css?family=Roboto:400,300,100,400italic,700italic,700");
 .delete {
    position:absolute;
    left:0px;
    top:0px;
    padding-top:20px;
    padding-left:10px;
    height:50px;
    margin-right:10px;
    width:1%;
}
.delete:hover {
    -webkit-transition: width .2s ease-in-out;
    -moz-transition: width .2s ease-in-out;
    -o-transition: width .2s ease-in-out;
    transition: width .2s ease-in-out;
    width:20%;
}
.days {
    display:inline-block;
    text-align:center;
    width:166px;
    margin-top:30px;
    font-family:"Roboto";
    font-weight:400;
    font-size: 15px;
}
ul {
    float:left;
    list-style:none;
    margin-right:10px;
    margin-left:10px;
}
.colcontent {
    width:1000px;
    top:100px;
    height:800px;
    position:absolute;
}
.connectable_list1 {
    /* background:blue;*/
    width:166px;
    margin-bottom:50px;
}
.connectable_list2 {
    /*background:red;*/
    width:800px;
    margin-bottom:50px;
}
.todo {
    clear:both;
}
.asgn {
    font-family:"Roboto";
    font-weight:300;
    font-size: 13px;
    position:relative;
    float:left;
    width:146px;
    height:60px;
    margin-bottom:2px;
    margin-right:20px;
    padding-left:30px;
    padding-top:10px;
    background-color:#E8E8E8;
}
.td {
    position:relative;
    float:left;
    width:146px;
    height:60px;
    margin-bottom:10px;
    padding-top:10px;
    margin-right:10px;
    padding-left:30px;
    background-color:#E8E8E8;
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('a').hide();
$(".delete").mouseenter(function () {
    $(this).find('a').show();
});

$(".delete").mouseleave(function () {
    $(this).find('a').hide();
});

$(".connectable_list1").sortable({
    connectWith: '.connectedSortable'
});
$(".connectable_list2").sortable({
    connectWith: '.connectedSortable',
});

$('.delete').click(function () {
    $(this).parent("li").slideUp(200);
});

('.delete').mouseOver(

function () {
    $('a').show();
});
});//]]>  

</script>


</head>
<body>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<div class="headings">
    <ul>
        <li class="days">MONDAY</li>
        <li class="days">TUESDAY</li>
        <li class="days">Wednesday</li>
    </ul>
</div>
<div class="colcontent">
    <ul class="connectable_list1 connectedSortable">
        <li class="asgn"> <span class='delete' style="background-color:blue;"><a href='#'>x</a></span>
Assignment1</li>
        <li class="asgn"><span class='delete' style="background-color:red;"><a href='#'>x</a></span>Assignment2</li>
        <li class="asgn"><span class='delete' style="background-color:green;"><a href='#'>x</a></span>Assignment3</li>
        <li class="asgn"><span class='delete' style="background-color:green;"><a href='#'>x</a></span>Assignment4</li>
    </ul>
    <ul class="connectable_list1 connectedSortable">
        <li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment1</li>
        <li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment2</li>
        <li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment3</li>
        <li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment4</li>
    </ul>
    <div>
        <div class="todo">
            <ul class="connectable_list2 connectedSortable">
                <li class="td"><span class='delete'>x</span>Todo1</li>
                <li class="td"><span class='delete'>x</span>Todo2</li>
                <li class="td"><span class='delete'>x</span>Todo3</li>
                <li class="td"><span class='delete'>x</span>Todo4</li>
            </ul>
        </div>

</body>


</html>


-kelseyhisek的JSFIDLE演示
@导入url（“http://fonts.googleapis.com/css?family=Roboto:400，300100400Italic，700italic，700“；
.删除{
位置：绝对位置；
左：0px；
顶部：0px；
填充顶部：20px；
左侧填充：10px；
高度：50px；
右边距：10px；
宽度：1%；
}
。删除：悬停{
-webkit过渡：宽度2英寸，易于进出；
-moz过渡：宽度。2秒缓进缓出；
-o型过渡：宽度。2s缓进缓出；
过渡：宽度。2s缓进缓出；
宽度：20%；
}
.天{
显示：内联块；
文本对齐：居中；
宽度：166px；
边缘顶部：30px；
字体系列：“机器人”；
字体大小：400；
字体大小：15px；
}
保险商实验室{
浮动：左；
列表样式：无；
右边距：10px；
左边距：10px；
}
科尔content先生{
宽度：1000px；
顶部：100px；
高度：800px；
位置：绝对位置；
}
.可连接列表1{
/*背景：蓝色*/
宽度：166px；
边缘底部：50px；
}
.可连接列表2{
/*背景：红色*/
宽度：800px；
边缘底部：50px；
}
托多先生{
明确：两者皆有；
}
A.asgn{
字体系列：“机器人”；
字体大小：300；
字体大小：13px；
位置：相对位置；
浮动：左；
宽度：146px；
高度：60px；
边缘底部：2px；
右边距：20px；
左侧填充：30px；
填充顶部：10px；
背景色：#E8E8E8；
}
.td{
位置：相对位置；
浮动：左；
宽度：146px；
高度：60px；
边缘底部：10px；
填充顶部：10px；
右边距：10px；
左侧填充：30px；
背景色：#E8E8E8；
}
//  

星期一
星期二
星期三



转让1
转让2
转让3
转让4


转让1
转让2
转让3
转让4


xTodo1
xTodo2
xTodo3
xTodo4

检查浏览器中的控制台输出（例如，Chrome/IE中的F12，FireFox中的FireBug）

在我脑海中，试着用

替换//ajax.googleapis.com
http://ajax.googleapis.com

；或者下载该文件并使用相对路径引用该文件

当您在本地运行时，您的协议是

文件：//

，

///host

表示“通过页面使用的相同协议访问

主机”
另外href=“/css/…
是绝对路径，因此它将在文件系统根目录上查找可能导致样式问题的css文件（/
在unix中，C:\
或D:\
）
更新
我将试着简单地介绍一下（就像同时处理网络/文件资源和4种语言/库一样简单；）
我将问题中的代码复制到D:\test\fiddle.html
中，用Chrome打开它，然后按F12。更好地了解，没有它的web开发就像用一把散开的刀砍掉一棵100年的树。基本用法是：右键单击>检查元素
得到file:///D:/test/jquery.js net:：ERR_FILE_NOT_FOUND fiddle.html:6
上面这一行是在保存页面后由您修改的。这是因为您将JQuery包含在小提琴中。在框架和扩展下，将其设置为“无库（纯JS）”，因为您将JQuery包含在
。\u这是JSFIDLE的要点，您不必编写那些繁琐的
标记
得到file:///D:/css/normalize.css net:：ERR_FILE_NOT_FOUND fiddle.html:7
在小提琴选项下取消勾选规范化CSS，这样就不会包含此文件。该文件会更改许多元素的填充和边距，以便修复布局添加
ul {
    padding: 0;
}

得到file:///D:/css/result-light.css net:：ERR_FILE_NOT_FOUND fiddle.html:8
此文件为空，可以安全忽略
得到file://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js net:：ERR_FILE_NOT_FOUND fiddle.html:126

得到file://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js net:：ERR_FILE_NOT_FOUND fiddle.html:125
正如您在这里看到的，它正在尝试加载file://...
这是不存在的。因此将包含行更改为
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

实际上，我是一名学生，在我的studio课程中学习HTML、CSS和JQuery的基础知识（为什么我要在本地保存）.因为我现在只知道最基本的内容，所以我不太确定如何根据您的反馈编辑我现有的代码！不过我非常感谢您的帮助。非常感谢您！！我花了几个小时尝试我能想到的一切来解决这个问题，所以您真的帮了我很大的忙。（我也很感谢您指导我完成每一步，这对以后的项目非常有价值）
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by kelseyhisek</title>
  <style type='text/css'>
    @import url("http://fonts.googleapis.com/css?family=Roboto:400,300,100,400italic,700italic,700");
 .delete {
    position:absolute;
    left:0px;
    top:0px;
    padding-top:20px;
    padding-left:10px;
    height:50px;
    margin-right:10px;
    width:1%;
}
.delete:hover {
    -webkit-transition: width .2s ease-in-out;
    -moz-transition: width .2s ease-in-out;
    -o-transition: width .2s ease-in-out;
    transition: width .2s ease-in-out;
    width:20%;
}
.days {
    display:inline-block;
    text-align:center;
    width:166px;
    margin-top:30px;
    font-family:"Roboto";
    font-weight:400;
    font-size: 15px;
}
ul {
    float:left;
    list-style:none;
    padding: 0;
    margin-right:10px;
    margin-left:10px;
}
.colcontent {
    width:1000px;
    top:100px;
    height:800px;
    position:absolute;
}
.connectable_list1 {
    /* background:blue;*/
    width:166px;
    margin-bottom:50px;
}
.connectable_list2 {
    /*background:red;*/
    width:800px;
    margin-bottom:50px;
}
.todo {
    clear:both;
}
.asgn {
    font-family:"Roboto";
    font-weight:300;
    font-size: 13px;
    position:relative;
    float:left;
    width:146px;
    height:60px;
    margin-bottom:2px;
    margin-right:20px;
    padding-left:30px;
    padding-top:10px;
    background-color:#E8E8E8;
}
.td {
    position:relative;
    float:left;
    width:146px;
    height:60px;
    margin-bottom:10px;
    padding-top:10px;
    margin-right:10px;
    padding-left:30px;
    background-color:#E8E8E8;
}
  </style>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('a').hide();
$(".delete").mouseenter(function () {
    $(this).find('a').show();
});

$(".delete").mouseleave(function () {
    $(this).find('a').hide();
});

$(".connectable_list1").sortable({
    connectWith: '.connectedSortable'
});
$(".connectable_list2").sortable({
    connectWith: '.connectedSortable',
});

$('.delete').click(function () {
    $(this).parent("li").slideUp(200);
});

('.delete').mouseOver(

function () {
    $('a').show();
});
});//]]>  

</script>


</head>
<body>
<div class="headings">
    <ul>
        <li class="days">MONDAY</li>
        <li class="days">TUESDAY</li>
        <li class="days">Wednesday</li>
    </ul>
</div>
<div class="colcontent">
    <ul class="connectable_list1 connectedSortable">
        <li class="asgn"> <span class='delete' style="background-color:blue;"><a href='#'>x</a></span>
Assignment1</li>
        <li class="asgn"><span class='delete' style="background-color:red;"><a href='#'>x</a></span>Assignment2</li>
        <li class="asgn"><span class='delete' style="background-color:green;"><a href='#'>x</a></span>Assignment3</li>
        <li class="asgn"><span class='delete' style="background-color:green;"><a href='#'>x</a></span>Assignment4</li>
    </ul>
    <ul class="connectable_list1 connectedSortable">
        <li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment1</li>
        <li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment2</li>
        <li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment3</li>
        <li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment4</li>
    </ul>
    <div>
        <div class="todo">
            <ul class="connectable_list2 connectedSortable">
                <li class="td"><span class='delete'>x</span>Todo1</li>
                <li class="td"><span class='delete'>x</span>Todo2</li>
                <li class="td"><span class='delete'>x</span>Todo3</li>
                <li class="td"><span class='delete'>x</span>Todo4</li>
            </ul>
        </div>

</body>


</html>