问题标签 [codepen]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1630 浏览

javascript - 可过滤的选择下拉列表(HTML、CSS、JS) - 直接从 Codepen 复制的代码不起作用

我在 Codepen 上找到了一个不错的可过滤选择下拉菜单,复制了代码,并试图让它在我的计算机上运行。

虽然布局看起来不错,但过滤在本地不起作用。

不幸的是,我完全不知道为什么。任何帮助表示赞赏。

工作原始 Codepen:

https://codepen.io/marijoha/pen/zKjvEw

我的(非工作)HTML 文件在线直播:

http://select-dropdown.bitballoon.com/

下载我的 HTML 文件:

https://send.firefox.com/download/bd917213cd/#mwjZbZTfXNNv6I8FTW5TLQ

我的 HTML 文件的代码:

0 投票
2 回答
25 浏览

jquery - 简单的 jQuery 脚本不起作用

我有一个小问题,jQuery不在这里工作,我看不出有什么问题,我正在做。我需要一些帮助。:)

CodePen 链接

0 投票
1 回答
584 浏览

html - 旋转与 div 方向相反的背景图像

问题[已解决]:如何旋转圆形的背景图片?
链接https ://codepen.io/Refath/pen/XaoMEj

嗨,我正在尝试以相反的方向旋转圆形元素的背景图像,但旋转幅度相同,以便背景相对于用户保持笔直。

我尝试使用 css 关键帧,但意识到这不是最好的主意,然后尝试实施 [这里] [1] 给出的解决方案,但在一些调整后也失败了。谢谢; 任何帮助表示赞赏(我不是高级 Web 开发人员,所以我对 JS 等没有太多经验)

0 投票
2 回答
235 浏览

polymer - Polymer 2.x 代码在 jsbin 中有效,但在 codepen、plunker 或 jsfiddle 中无效

下面的代码在这个 jsbin中正常工作,但在这个 codepen这个 plunker这个 jsfiddle中都不能工作。

为什么不?我怎样才能让它在它没有的三个地方工作?

http://jsbin.com/yudavucola/1/edit?html,控制台,输出
0 投票
2 回答
7659 浏览

jquery - 为什么这个 Bootstrap Carousel 滑动功能对我不起作用?

我找到了这个代码笔: https ://codepen.io/andrearufo/pen/rVWpyE

我很想使用它,但由于某种原因,它对我不起作用,即使我复制它而不改变任何东西。为什么是这样?

我没有忘记嵌入 bootstrap 或 jquery。

我还尝试了其他用于滑动功能的解决方案,但由于某种原因,它们都没有奏效。滑动工作的唯一轮播(我在 Google Chrome 开发人员工具中尝试过)是在这个 codepen 上。

0 投票
0 回答
261 浏览

fonts - 有没有办法让不是来自或不存在于谷歌字体网站上的字体与 Codepen 一起使用?

我在 Google 字体环境之外找到了我喜欢的字体,但我很难弄清楚如何将它们添加到 Codepen 环境中。

它们在本地对我很有用,只需将字体从“Font 1001”保存到我的 css 文件夹中的字体文件夹,并使用以下代码使它们执行:

“Font 1001”提供了他们字体的永久链接,但他们不使用 codepen 似乎喜欢的 url 格式,我找不到使用非 Google 字体的替代方法。

这是 codepen 似乎只有以下的格式:

这是来自“1001”字体的永久链接:

它没有?family=fontname

所以我想那是一天的破坏者。

除了我想要的字体之外,没有人没有如何获得 codepen 吗?

0 投票
1 回答
574 浏览

html - Scrollspy Bootstrap 4 - Not working on Codepen

I’m trying to use the Bootstrap 4 Scrollspy feature for my Portfolio Page, but I can’t make it work in Codepen.

I searched in StackOverflow and found that someone used this feature in Codeply, here’s the link, and it works just fine.

I took the code and put it on Codepen, but couldn’t make it work: here’s the link. This is the HTML.

And this is the CSS.

As you can see, when you scrolldown in Codepen the nav items don’t change, but in Codeply they do.

Does anyone know what’s wrong?

Thanks in advance for your help.

Juan Betancourt.

PS: I think it’s possible that the problem is in the CSS and JavaScript Pen settings or in the body tag attributes.

0 投票
1 回答
39 浏览

javascript - 切换课程时遇到问题

所以我的目标是能够使用我创建的自定义复选框来切换输入。现在我让它工作了,但是,它只将类添加到第一个孩子(选项 1)

见下图 在 此处输入图像描述

当我单击选项 2 和 3 时,仍会显示默认复选框

在此处输入图像描述

我尝试过使用 document.querySelectorAll 但这不起作用。

这是 Codepen codepen.io/Brushel/pen/QqLgyZ 的链接

这是代码:

0 投票
4 回答
8864 浏览

html - 背景图片没有覆盖整个页面?

我刚刚开始学习 HTML 和 CSS(以及一点 Bootstrap),我正在尝试制作一个简单的滚动网页。我的问题是我无法让 div 背景图像覆盖页面的整个高度——它只覆盖 h2 文本,就像它认为该元素的结尾是页面的结尾一样。我不知道它为什么会这样,而且我无法修复它。这真的难倒我,我敢肯定它有一个我错过的非常简单的解决方案。任何建议将不胜感激。

这是代码笔

0 投票
3 回答
7316 浏览

reactjs - 反应渲染不显示任何东西

我的反应代码笔没有显示任何内容。

JS

HTML

我通过 cdn 导入了 React 和 ReactDOM。如果我在控制台中输入 React/ReactDOM,它会正确导入。这段代码没有显示任何错误,但我什么也没看到。我在多个浏览器(chrome、firefox、icecat)上对此进行了测试,但仍然没有结果……我使用的 bable 是一个预处理器。