Javascript 新手CSS需要帮助调试

这是我的第一篇文章，我在调试我正在处理的项目中的一些CSS错误时遇到了问题。以下是该页面的链接：

你可以看到缩略图是如何重复的，右边有一些文本混乱，这就是它应该是什么样子：musiccomputing.com/studioblade-5-61-key-macos-x/（很抱歉，他们不允许我发布超过2个链接）

我正在努力在产品描述下添加一个“选项卡”部分。下面是我添加的导致上述问题发生的代码。我一直在尝试用杀虫剂和萤火虫来调试，但不幸的是我还在学习，所以决定求助于你们，我知道你们可以很快解决这个问题

（顺便说一句，这是在Bigcommerce平台上）

---

非常感谢您的帮助

在您的工作版本上-您的选择框被包装在一个带有选择器类的div中。父级上的此类将以下CSS分配给选择框，以修复样式设置问题：

    div.selector select {
        position: absolute;
        opacity: 0;
        filter: alpha(opacity=0);
        -moz-opacity: 0;
        border: none;
        background: none;
        cursor: pointer;
        height: 100%;
    }

重新添加父级-或添加一个类为的新父级。选择，框将再次正确显示

编辑

在缩略图查看器上有一个“ProductTinyImageList”类，其中包含一些动态添加的样式，可能是通过JavaScript添加的

当在站点的控制台中查看时，init.js的第12行也有一个错误-这个错误可能是阻止其他js执行的原因，也可能是破坏缩略图查看器的原因

---

我要做的第一件事是修复JS错误，然后重新测试。

在将问题发布到堆栈时，尽量隔离问题。这使人们能够更快地调试您的代码并提供一个好的答案。最好的方法是创建一个。这是共享代码的公认方法，而不是pastebin。你应该经常这样做，而不是直接链接到你的网站。谢谢James，我本来会选择JFIDLE或Codepen，但我没有发现Bigcommerce使用的所有奇怪变量都会正确显示出来。doh！！！我在读你的答案，所以你是说问题在于ProductTinyImageList，而不是额外添加的代码？@edRone这是HTML的两个不同部分。但我相信这可能是因为您的JavaScript在损坏的页面上返回了一个错误。如果您转到断开的页面，打开开发工具（F12），然后选择console选项卡，您将在页面上看到JavaScript错误。如果你能纠正这个错误，你的问题很可能会消失。