我需要在 Next JS 中获取动态路由中的路径。这在客户端组件中很容易做到。
在 src/app/[id]/page.tsx 中
"use client";
import { usePathname } from "next/navigation";
export default function Page() {
const pathname = usePathname();
但是您不能usePathname在服务器组件中使用。如何在 Next JS 13 中获取 React 服务器组件中的 url？
我需要div使用jQuery 为a添加一定数量的像素.
有一个简单的命令,或者我需要编写一些代码,首先找到元素的宽度,然后添加设定的数量？
编辑 - 我改变了我的代码:
这很好用:
$(".image-div").click(function () {
if ($(this).css('z-index') == 1)
$(this).css('z-index','2');
else
$(this).css('z-index','1');
});
这也有效:
$(".image-div").click(function () {
if ($(this).css('z-index') == 1)
$(this).animate({
width: '500px'
}, 5000, function() {
// Animation complete.
});
else
$(this).animate({
width: '250px'
}, 5000, function() {
// Animation complete.
});
});
但这没有做任何事情:
$(".image-div").click(function () {
if ($(this).css('z-index') == 1)
$(this).css('z-index','2');
$(this).animate({
width: '500px'
}, 5000, function() {
// Animation complete.
});
else
$(this).css('z-index','1');
$(this).animate({
width: '250px'
}, 5000, function() {
// Animation complete.
}); …是否可以向jQuery添加if语句,因此当您单击一个元素时,如果另一个div的CSS值为left,则只运行一个函数:1%？
稍后CSS可能会改变,我会需要它,所以当你单击一个元素时,第一个函数不会触发,但是对于另一个函数不会触发.
我使用jQuery的unwrap函数,但我希望它只解包如果父div(要删除的那个)有一个特定的类.
我在用这个:
$('.children').unwrap();
我尝试将其更改为this,因此只有父类只有'parent'类才会删除它,但代码的行为与上面相同.谢谢
$('.children').unwrap('.parent');
我正在制作一个日历,每天都有一个单选按钮,允许您选择它.我希望用户只能选择一天.我遇到的问题是我把日历作为一个表格,所以每个<td>都有以下内容:
<td>
<form>
Mon 18
<input type="radio" name="day" value="mon18" />
</form>
</td>
因为所有单选按钮都不包含在一个表单元素中,所以不会发生使选择互斥的正常行为.如果我在所有标记周围创建1个表单元素,那么表格将包含在其中,这在语义上是否正确？
我的问题是否有语义上正确的解决方案？我想我可以用javascript和服务器端验证来做到这一点.
对于这个小提琴,为什么底部有空格div#imageDiv？
<div>
<div>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-256px-SIPI_Jelly_Beans_4.1.07.tiff.jpg" />
</div>
</div>
</div>
<div id="text"><div id="inner">text goes here</div></div>
html {
line-height: 1.5em;
}
#text {
background-color: grey;
margin-top:-7px;
}
我使用SASS和base64编码的图像.我在多个地方重复使用相同的背景图像,理想情况下我喜欢将代码保存在单独的文件中.
如果我没有使用base64图像,这将是我的SASS代码:
$background-image: url(image-file.jpg);
.div1 {
background-image: $background-image;
}
//This is in a seperate file
.div2 {
background-image: $background-image;
}
但是,如果我现在用base64图像替换图像URL,则它看起来如下所示.问题是重复了base64编码的字符串,这会不必要地增加文件大小.
$background-image: url(data:image/jpeg;base64,/9j/4AAQSk);
.div1 {
background-image: $background-image;
}
//This is in a seperate file
.div2 {
background-image: $background-image;
}
那么有没有办法让我的代码保持良好和组织在单独的文件中,并使用base64图像,而不是重复base64字符串？
我正在使用jQuery waypoints插件.以下工作正常,除了在页面加载时,控制台消息在ive滚动之前被触发.停止如果我删除了应用于图像的显示块,但我需要这个以便我的网站工作.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="js/jquery-2.0.3.js"></script>
<script src="js/waypoints.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
display: block;
margin: auto;
}
#img3 {
opacity: 0.5;
}
</style>
<script>
$(document).ready(function() {
$('#img3').waypoint(function() {
console.log('Basic example callback triggered.');
});
});
</script>
<body>
<img src="images/1.jpg" alt="image 1" id="img1">
<img src="images/2.jpg" alt="image 2" id="img2">
<img src="images/3.jpg" alt="image 3" id="img3">
<img src="images/4.jpg" alt="image 4" id="img4">
</body>
</html>
香港专业教育学院使用CSS:选择器为我的链接创建一个箭头.这很好但现在我想做同样的事情来形成输入.
如果我在提交按钮上使用相同的类,则忽略:after,我假设因为元素不能包含其他其他元素.
如果我将类应用于包含提交按钮的div,那么它看起来很好,但实际提交按钮之外的箭头和填充是不可点击的.
这个问题有方法解决吗？
.button-style {
background: -moz-linear-gradient(top, #02AD85, #019975);
background: -webkit-linear-gradient(top, #02AD85, #019975);
background: linear-gradient(top, #02AD85, #019975);
padding: 0.7em;
border-radius: 0.5em;
border-bottom: 4px solid #003E30;
box-shadow: 0 2px 0px #252D42;
font-size: 15px; //findme
margin-top: 15px;
display: inline-block;
margin-top: 10px; //findme
border-top: none;
border-right: none;
border-left: none;
color: white;
font-size: 12px;
}
.button-style:after {
content: '';
display: inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0.4em 0 0.4em 0.7em;
border-color: transparent transparent transparent #FFF;
margin-left: 0.75em;
}
.button-style input …jquery ×4
css ×2
forms ×2
base64 ×1
if-statement ×1
javascript ×1
next.js ×1
reactjs ×1
sass ×1
typescript ×1