gpt4 book ai didi

php 文档中的 Javascript/jquery ul/li 动画?

转载 作者:行者123 更新时间:2023-12-03 06:08:06 25 4
gpt4 key购买 nike

我刚刚开始做一些 php,并且遵循了 udemy 页面上的一个教程,了解如何构建一些简单的 php 网站。现在我想用 Js/Jquery 为导航栏项目边框半径设置动画。但这似乎对我不起作用。我使用 php include 将导航栏包含到 header 中,然后将 header 包含到主 php 文件中。

这是我的导航栏文件。

<ul>
<li id="indexx"><a href="index.php">Home</a></li>
<li id="teamm"><a href="team.php">Team</a></li>
<li id="menuu"><a href="menu.php">Menu</a></li>
<li id="contactt"><a href="contact.php">Contact</a></li>
</ul>

我将其包含在我的标题 div id="nav"中,如下所示。

<?php
$companyname = "Franklin's Fine Dining";
include ('arrays.php');
?>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title><?php echo TITLE; ?></title>
<link rel="stylesheet" href="assets/styles.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="includes/animatioon.js"></script>
</head>

<body id="final-example">

<div class="wrapper">

<div id="banner">
<a href="index.php" title="Return to home"></a>
<img src="img/banner.png" alt="nema slike jbg." />
</div>

<div id="nav">
<?php include ('includes/nav.php'); ?>
</div>

<div class="content">

我的网站有主要的 php 文件,如索引、菜单、团队等,其中包括 header 。

那么,如何为这些导航栏项目设置动画,以便在输入鼠标时它们的边框半径发生变化?由于导航栏包含在每个主 php 文件的 header 和 header 中,因此我尝试添加 jquery 和 js 文件的源代码,其中“动画”代码位于我的 header.php 中,但它似乎不起作用。

有人可以给我一些关于我应该如何做的提示吗?

顺便说一句,这是动画代码:

$(document).ready(function() {
$('#indexx,#teamm,#menuu,#contactt').mouseenter(function() {
$(this).animate(borderRadius(300),200);
});

谢谢大家,我设法让它发挥作用。但我仍然有一个问题。这就是我的 ul 和 li 的样子:

enter image description here

现在有没有办法对 li(主页、团队、菜单、联系人)边框半径进行动画处理,因为它们是 li 元素?我添加了宽度和高度属性。但是当我执行 mouseenter 时,我得到了这些更改,但边框半径没有改变,我的意思是盒子仍然没有“弯曲” enter image description here 。我提前很抱歉可能会提出愚蠢的问题和错误的解释,但我只是这方面的初学者,正如我所说,我遵循了有关如何构建此网页的教程。

最佳答案

请记住,php 是一种服务器端语言,可帮助您构建动态 HTML。因此,请确保预先包含客户端发生的任何事情所需的所有 JavaScript。请参阅下面的示例,我假设您的 jquery 选择器是正确的。

<head>
<meta charset="utf-8">
<title><?php echo TITLE; ?></title>
<link rel="stylesheet" href="assets/styles.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="includes/animatioon.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('#indexx,#teamm,#menuu,#contactt').mouseenter(function() {
$(this).animate(borderRadius(300),200);
});
});
</script>

</head>

关于php 文档中的 Javascript/jquery ul/li 动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39445953/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com