小编Spe*_*ctr的帖子

新安装的 create-next-app 后,无效的 href 传递给路由器错误

使用create-next-app我在本地机器上安装 nextjs 应用程序后,我在控制台中收到此错误Invalid href passed to router

有谁知道如何解决它?

我尝试在组件中使用to属性而不是href属性,Link但它没有帮助。

reactjs next.js

12
推荐指数
2
解决办法
8331
查看次数

响应:幻灯片在调整大小时消失

我在幻灯片中使用了响应断点.在小屏幕上,我一次显示1张幻灯片.在大2(大意味着小于990像素)

示例:我将断点设置为在小屏幕上一次显示1张幻灯片,并禁用slider大屏幕.我有8幻灯片.在屏幕大于990像素.

如果在小屏幕上我导航到幻灯片并再次使屏幕变大,则此块中的每个幻灯片都会消失.

你可以在codepen中检查它

如果我删除这部分代码

responsive: [{
                breakpoint: 568,
                settings: {
                    slidesToShow: 1
                }
            }]
Run Code Online (Sandbox Code Playgroud)

一切都会好起来的

请帮助任何人

这是我的配置 Slick slider

$(window).on('load', function(){
    if($(window).width() < 990){
     $('.container-slick').slick({
          centerMode: true,
          infinite: true,
          prevArrow: false,
          nextArrow: false,
          speed: 200,
          slidesToShow: 2,
          slidesToScroll:1,
          autoplay:true,
            responsive: [{
                breakpoint: 568,
                settings: {
                    slidesToShow: 1
                }
            }]
        });
    }
  });
$(window).on('resize', function(){
    if($(window).width() < 990){
     $('.container-slick').not('.slick-initialized').slick({
          centerMode: true,
          infinite: true,
          prevArrow: false,
          nextArrow: false,
          speed: 200,
          slidesToShow: …
Run Code Online (Sandbox Code Playgroud)

jquery slick

10
推荐指数
1
解决办法
1659
查看次数

Onmouseover onmouseout图像更改液体效果

我需要像这里一样用液体效果实现图像变化

我有一个带图像的简单块我需要onmouseover用此效果更改此图像(到其他图像)并返回到初始位置onmouseout也使用此效果

const avatarQuantumBreak = document.querySelector(".avatar_quantum_break");
const avatar = document.querySelector(".avatar");

avatarQuantumBreak.style.opacity = "0";

let hover = () => avatarQuantumBreak.style.opacity = "1";
let normal = () => avatarQuantumBreak.style.opacity = "0";

avatar.onmouseover = () => hover();
avatar.onmouseout = () => normal();
Run Code Online (Sandbox Code Playgroud)
html , body {
  height:100%;
}

.avatar {
  position: relative;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  height: 195px;
}
.avatar_simple,
.avatar_quantum_break {
  position: absolute;
  display: block;
  text-align:center;
  transition: opacity 1s ease-out;
}
.avatar .avatar_simple img, …
Run Code Online (Sandbox Code Playgroud)

javascript three.js tweenmax gsap

5
推荐指数
0
解决办法
350
查看次数

如何从 querySelectorAll 获取所有元素并与 addEventListener 一起使用

我有一个块。当我点击加号时,会创建 4 个子块。当我点击任何一个子块加号按钮(rooms-guests-plus类)时,我必须添加,它们从0 增加到 5,当单击减号按钮(rooms-guests-minus类)时,它们以相同的方式减少。

const room = document.querySelector('.room-guests-count');
const form = document.querySelector('.form-open');
const adultsChildren = document.querySelector('.adults-children');
const adultsChildrenWrapper = document.querySelector('.adults-children-wrapper');

const toggleRoom = () => {
  const addRoomButton = document.querySelector('#add-room');
  const removeRoomButton = document.querySelector('#remove-room');
  const countRoom = document.querySelector('.form-text');
 
  const addSection = () => {
    const wrapper = document.createElement("div"); 
    wrapper.className = "adults-children-wrapper"; 
    wrapper.innerHTML = adultsChildrenWrapper.innerHTML;                
    adultsChildren.appendChild(wrapper).querySelector(".room-count").innerText = countRoom.value;

  }
  const removeSection = () => {
    adultsChildren.lastChild.remove();
  }
  
  addRoomButton.onclick = () => {
    if(countRoom.value == …
Run Code Online (Sandbox Code Playgroud)

javascript ecmascript-6

4
推荐指数
1
解决办法
3852
查看次数

组合 htmlwebpackplugin 块

求问如何组合多个htmlwebpackplugin代码,写出更优雅的代码。

我需要解决每次重复这new HtmlWebpackPlugin({//..somecode}) 部分代码时都能减轻我 的压力。

new HtmlWebpackPlugin({
            filename: "index.html",
            template: "build/index.html",
            hash: true,
            chunks: ["index"]
        }),

         new HtmlWebpackPlugin({
             filename:"footer.html",
             template:"build/footer.html",
             chunks:["footer"]
         }),
         new HtmlWebpackPlugin({
             filename:"news.html",
             template:"build/news.html",
             chunks:["news"]
         }),
         new HtmlWebpackPlugin({
               filename: "one-news.html",
               template: "build/one-news.html",
               chunks: ["oneNews"]
         }),
         new HtmlWebpackPlugin({
             filename: "project.html",
             template: "build/project.html",
             chunks: ["project"]
         }),
         new HtmlWebpackPlugin({
             filename: "about-us.html",
             template: "build/about-us.html",
             chunks: ["aboutUs"]
         }),
         new HtmlWebpackPlugin({
             filename: "contact.html",
             template: "build/contact.html",
             chunks: ["contact"]
         }),
Run Code Online (Sandbox Code Playgroud)

webpack

3
推荐指数
1
解决办法
4231
查看次数