javascript - 我将如何在我的 html 结构中使用它?

标签 javascript jquery html css

我是 jquery 的新手,我不想最终做错事,我已经做了其他所有事情,但是,我被困在这部分了。我该如何连接它?我试过使用脚本标签,但我不确定那是否正确。

$(document).ready(function() {
     $('.menu').dropit()
});

好的,我已经按照你们的建议做了,但它似乎仍然不起作用。 完整代码如下:

    <!doctype html>
<html>
<head>




<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="path/to/your/jquery/script.js"></script>
<script src="dropit.js"></script>
<link rel="stylesheet" href="dropit.css" type="text/css" />



<style> 
body
{
background:url("");
background-size:0px 0px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>




<STYLE>
<!--
 a:hover{color:#c0c0c0;}
-->
</STYLE>


<style>
    .navLink {
    color: #000000;    
    text-decoration: none !important;}

ul
{
list-style-type:none;
font-size: SMALL;
font-family: 'Ubuntu Condensed', sans-serif;
font-weight: lighter;
font-style: regular;}

li
{
display:inline;
}

</style>


</head>
<body>



<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="100" height="70">
<HR COLOR="#C0C0C0" WIDTH="100%">

<ul id="nav" >

<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="450" height="1"> <li><a href="#">
     <a href="#">MENS</a>
    <ul>
            <li><a href="#">Shirts</a></li>
            <li><a href="#">Jackets</a></li>
            <li><a href="#">Denim</a></li>
            <li><a href="#">Fleece</a></li>
         </ul>
        </li>



<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="1">  
         <li><a href="#" class="navLink">WOMEN'S</a></li>
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="1">
    <li><a href="#" class="navLink">NEW ARRIVALS</a>
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="1">
    <li><a href="#" class="navLink">BLOG</a>
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="1">
    <li><a href="#" class="navLink">SALE</a>
</ul>

<HR COLOR="#C0C0C0" WIDTH="100%">

<ul id="nav" >
<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="0" height="2">

<p><p align="center"><img border="0" src="http://img593.imageshack.us/img593/6192/5eo7.png" alt="Vealed" width="800" height="500">


<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="70" height="2">

</ul>







<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="100" height="200"



<script type="text/javascript">
$(document).ready(function() {
     $('.menu').dropit();
});
</script>
</body>
</html>

我想让菜单中的所有链接都有一个下拉菜单。

最佳答案

像这样将 script 标签放在 head 标签之间

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
</head>

像这样把它放在结束的 body 标签之前

<script type="text/javascript">
$(document).ready(function() {
     $('.menu').dropit();
});
</script>
</body>

另一种选择是将所有 javascript/jquery 放在一个单独的文件中,而不是将 jQuery 代码放在底部。然后只需链接到它。

例如

<script type="text/javascript" src="myjsfilename.js"></script>
</body>  //again, you put this right before the closing body tag

然后在您的 myjsfilename.js 文件中,您将拥有

$(document).ready(function() {
     $('.menu').dropit();
});

再加上你想添加的javascript/jquery代码

这样做有助于让事情井井有条

关于javascript - 我将如何在我的 html 结构中使用它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20939203/

相关文章:

javascript - 如何关闭从父组件在子组件 react 中打开的MUI Modal

javascript - 手动 Bluebird promise 中的resolve()

jquery - jsGrid loadData 不起作用

javascript - Jquery - 动画作为幻灯片

html - 父 div 中的转换是 "overriding"子 div 中的转换

javascript - 无论顶部位置如何,都使兄弟元素固定

javascript - 是否可以使用正则表达式去除字符串中超过 X 位的数字?

javascript - 延迟 CSS 转换 2 秒

javascript - 在 console.log 中调用时,jQuery 实例如何显示为数组?

java - 将 Java Applet 嵌入到 .html 文件中