个人中心
gpt4 book ai didi

javascript - JQuery 未在浏览器中与 CSS 链接

转载 作者：行者123 更新时间：2023-11-28 10:20:25 25 4
gpt4 key购买 nike

我正在运行一些简单的代码，但它无法在我的家用计算机上运行。我正在使用 JQuery UI 运行一个示例，但即使这样也无法运行。我已经下载了 JQuery 的完整版本，并使用 WAMP/Apache 运行它。

代码如下:

   <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="stylesheet" />   
        <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
        <script type="text/javascript">
            $(function(){

                // Accordion
                $("#accordion").accordion({ header: "h3" });

                // Tabs
                $('#tabs').tabs();

                // Datepicker
                $('#datepicker').datepicker({
                    inline: true
                });

                // Slider
                $('#slider').slider({
                    range: true,
                    values: [17, 67]
                });

                // Progressbar
                $("#progressbar").progressbar({
                    value: 20 
                });

                //hover states on the static widgets
                $('#dialog_link, ul#icons li').hover(
                    function() { $(this).addClass('ui-state-hover'); }, 
                    function() { $(this).removeClass('ui-state-hover'); }
                );

            });
        </script>
        <style type="text/css">
            /*demo page css*/
            body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
            .demoHeaders { margin-top: 2em; }
            #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
            #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
            ul#icons {margin: 0; padding: 0;}
            ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
            ul#icons span.ui-icon {float: left; margin: 0 4px;}

        </style>    
    </head>
    <body>
    <meta charset="utf-8">
    <style>
    h1 { padding: .2em; margin: 0; }
    #products { float:left; width: 500px; margin-right: 2em; }
    #cart { width: 200px; float: left; }
    #cart ol { margin: 0; padding: 1em 0 1em 3em; }
    .tooltip {
  border-bottom: 1px dotted #000000;
  color: #000000; outline: none;
  cursor: help; text-decoration: none;
  position: relative;
}
.tooltip span {
  margin-left: -999em;
  position: absolute;
}

    .tooltip:hover span {
              font-family: Calibri, Tahoma, Geneva, sans-serif;
              position: absolute;
              left: 1em;
              top: 2em;
              z-index: 99;
              margin-left: 0;
              width: 250px;
            }
            .tooltip:hover img {
              border: 0;
              margin: -10px 0 0 -55px;
              float: left;
              position: absolute;
            }
            .tooltip:hover em {
              font-family: Candara, Tahoma, Geneva, sans-serif;
              font-size: 1.2em;
              font-weight: bold;
              display: block;
              padding: 0.2em 0 0.6em 0;
            }
            .classic { padding: 0.8em 1em; }
            .custom { padding: 0.5em 0.8em 0.8em 2em; }
            * html li:hover { background: transparent; }
            .classic { background: #FFFFAA; border: 1px solid #FFAD33; }border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);


    </style>
    <script>
    $(function() {
        $( "#catalog" ).accordion();
        $( "#catalog li" ).draggable({
            appendTo: "body",
            helper: "clone"
        });
        $( "#cart ol" ).droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function( event, ui ) {
                $( this ).find( ".placeholder" ).remove();
                $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
            }
        }).sortable({
            items: "li:not(.placeholder)",
            sort: function() {
                // gets added unintentionally by droppable interacting with sortable
                // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
                $( this ).removeClass( "ui-state-default" );
            }
        });
    });
    </script>



<div class="demo">

<div id="products">
    <h1 class="ui-widget-header">Products</h1>  
    <div id="catalog">
        <h3><a href="#">Processors</a></h3>
        <div>
            <ul class ="tooltip">
                <a class ="tooltip"><span class="classic">This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span>Intel i7</a>
                <li>Intel i5</li>
                <li>Intel i3</li>
            </ul>
        </div>
        <h3><a href="#">Graphics Cards</a></h3>
        <div>
            <ul>
                <li>Nvidia GeForce 9700</li>
                <li>Nvidia 1200GT</li>
                <li>Nvidia GeForce GTX 580</li>
            </ul>
        </div>
        <h3><a href="#">Monitors</a></h3>
        <div>
            <ul>
                <li>Acer 15'</li>
                <li>Dell 17'</li>
                <li>Compaq 12'</li>
            </ul>
        </div>
    </div>
</div>

<div id="cart">
    <h1 class="ui-widget-header">Shopping Cart</h1>
    <div class="ui-widget-content">
        <ol>
            <li class="placeholder">Add your items here</li>
        </ol>
    </div>
</div>





</div>


    </body>
</html>

当我尝试访问本地主机并进入我的文件时，它会显示没有任何 CSS 或图片。然而，它可以在我的大学机器上运行。两组文件具有相同的文件结构并运行相同的代码。

我做错了什么吗？

最佳答案

除了已经指出的明显忽视 HTML 标准之外 - 您的大学计算机和家庭计算机之间的差异可能是因为您使用了不同的浏览器或版本。

将所有样式和脚本移至头部。那时它很可能会起作用。

关于javascript - JQuery 未在浏览器中与 CSS 链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5771595/

25 4 0
文章推荐： html - 如何使用 Bootstrap 在搜索输入字段内附加搜索按钮
文章推荐： javascript - 向收件箱选项卡和垃圾选项卡添加不同的下拉菜单
文章推荐： html - 如何在我的 web.config 中包含我的 CSS 文件的路径？
文章推荐： javascript - facebook 使用 getSession 同步请求
行者123
个人简介

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

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