小编hun*_*tar的帖子
无法读取未定义的属性“classList”
我正在尝试做一个简单的滑块，但我遇到了这个问题：
Uncaught TypeError: Cannot read property 'classList' of undefined
这是我的代码：
var div = document.querySelectorAll("div");
for(var i = 0; i < 6; i++){
div[i].onclick = function() {
this.classList.remove("active");
div[i+1].classList.add("active");
}
}
有人可以帮我吗？
5
推荐指数
推荐指数
1
解决办法
解决办法
3万
查看次数
查看次数
(S)CSS架构:替代背景造型
我在SMACSS/ITCSS中使用CSS的'组件'方法,我仍然在考虑使用替代(深色)背景的样式部分.
例如,条纹有规则(白色的深色文本)和替代(黑暗的白色文本)部分.
据我所知,有假设HTML的选项:
<section class="dark">
<h2>Title</h2>
<p>Text</p>
<a href="#" class="btn">Action</a>
</section>
部分语境中的风格,例如:
.dark h2, .dark p, .dark btn {
color: white;
}
但是a)不建议使用上下文样式; b)人们把风格放在哪里？(Harry Roberts认为在组件的文件中)
使用修饰符创建替代颜色的组件
并更改HTML,例如:
.title--alt-color {color: white;}
.text--alt-color {color: white; }
...
但是a)当你不知道哪些组件会进入那里时它不起作用; b)管理HTML的更多工作.
也许有更好的方法来处理这个问题？
5
推荐指数
推荐指数
1
解决办法
解决办法
432
查看次数
查看次数
图像上的文字 - 响应
这是我的第一个问题......我必须这样做:
但我搜索了很多,没有什么对我有用,我在我的HTML和CSS中有类似的东西
.thumbnail {
position: relative;
margin-bottom: 0;
border: 0;
border-color: transparent;
}
.caption {
position: absolute;
top: 40%;
left: 0;
width: 100%;
} <div id="box-search">
<div class="thumbnail text-center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Granola03242006.JPG/280px-Granola03242006.JPG" alt="">
<div class="caption">
<p>contacto@windberg.cl</p>
<p>+56983874071 | +56228231294</p>
<p>El Aguilucho 3174, Providencia, Región Metropolitana</p>
</div>
</div>
</div>这工作,但当我使用铬的响应模式时,文本离开图像
(对不起我的英语,我说西班牙语)
5
推荐指数
推荐指数
1
解决办法
解决办法
3万
查看次数
查看次数
在IE中不触发按钮上的子项上的click事件
我有一个带有跨度的按钮。我在按钮上有一个click事件，在跨度上也有click事件，但是在IE11中，没有触发跨度click事件（在Chrome / Firefox中有效）。没有从按钮更改为div的方法，有什么解决方法？
我知道将我的按钮更改为div可以正常工作（如其他问题所回答），我想避免这样做。
https://jsfiddle.net/asjo8ox0/2/
$(document)
.on("click", ".parent", function() {
alert("parent");
})
.on("click", ".child", function(e) {
alert("child");
e.stopPropagation();
}).parent {
width: 200px;
height: 200px;
background-color: cornflowerblue;
}
.child {
width: 100px;
height: 100px;
background-color: white;
display: none;
}
.parent:hover .child {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="parent">
<span class="child"></span>
</button>5
推荐指数
推荐指数
2
解决办法
解决办法
3465
查看次数
查看次数
连续循环滚动（无 jQuery）
我想在页面上的文本列表中添加一个连续循环滚动。因此，当用户到达列表的最后一项时，第一项会在您滚动时直接显示在下方，依此类推。上下滚动会很棒。滚动将在页面上，而不是在列表的父容器上。
我知道面向 jQuery 的解决方案，例如：Continuous Looping Page (Not Infinite Scroll)，但希望使用 vanilla JS 解决方案来避免性能开销。
这是示例 HTML：
<div class="wrapper">
<ul class="loop">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<!-- THERE COULD BE LOTS OF LIST ITEMS -->
</ul>
</div>
这支笔似乎有了答案。但是，当我开始剥离样式并用自己的样式替换时，滚动停止工作。如果可能的话，我希望这个卷轴不要依赖任何装饰元素。
我在这里设置了一支笔：https : //codepen.io/abbasarezoo/pen/pavxVd
在此先感谢您的帮助！
5
推荐指数
推荐指数
1
解决办法
解决办法
5652
查看次数
查看次数
为什么位置:相对; 不在firefox上工作？
我绝对在一个相对容器内放置一个div,但在firefox中它完全忽略它.
这是一个fidde:http://jsfiddle.net/TThUZ/
我的HTML:
<div class="main">
<ul>
<li>
<a>
Text
</a>
<div class="sub">
Sub
</div>
</li>
</ul>
</div>
CSS:
ul { display: table; }
li { display: table-cell; width: 300px; background: #ddd; padding-left: 50px; position: relative; }
.sub { position: absolute; left: 0; }
将.sub不遵循位置:相对li.为什么？以及如何解决它？
4
推荐指数
推荐指数
1
解决办法
解决办法
3162
查看次数
查看次数
在可滚动模态中具有固定位置的Div
我有一个带有滚动的模态的div,它应该具有相对于浏览器窗口的固定位置,并且不应该使用模态滚动.
我试过position:fixed,但它不起作用.在这里你可以看到它的上下文中的问题:
$('.launchConfirm').on('click', function (e) {
$('#confirm').modal({
show: true
});
});@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css' );<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="page-container">
<div class="container">
<br />
<button type="button" class="btn launchConfirm">Open modal</button>
</div>
</div>
<div class="modal fade" id="confirm">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine …4
推荐指数
推荐指数
2
解决办法
解决办法
9099
查看次数
查看次数
光滑 - 上一个/下一个箭头卡在滑动转盘内
使用光滑:http://kenwheeler.github.io/slick/
HTML
<div class="carsoule" style="overflow:hidden; width: 300px; height: 200px; margin: 0 auto; background:red">
<div>
<img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250">
</div>
<div>
<img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250">
</div>
</div>
CSS
.slick-prev, .slick-next {
height: 55px;
width: 55px;
}
.slick-prev {
left: -80px;
/*plan to add button image*/
}
.slick-next {
right: -80px;
/*plan to add button image*/
}
试图覆盖,但prev和下一个按钮卡在旋转木马内.想要用按钮图像替换css,按钮应该在旋转木马外面,就像光滑网站上的例子一样.无法想象我哪里出错了.
帮助赞赏!
3
推荐指数
推荐指数
2
解决办法
解决办法
2万
查看次数
查看次数
为什么位置:绝对; 会扩大测试div的高度吗？
div.test被设置为自动高度,没有固定高度.
.test {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: yellow;
width: 200px;
height: auto;
padding: 10px;
}<div class="test">
it is a test info for my div .
</div>现在要添加一个position:absolute;in css,所有其他css属性保持不变.
.test {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: yellow;
width: 200px;
height: auto;
padding: 10px;
position: absolute;
}<div class="test">
it is a test info for my div .
</div>div.test的高度被放大了,为什么？
2
推荐指数
推荐指数
1
解决办法
解决办法
68
查看次数
查看次数
将材质图标与文本对齐
我在下面的代码中使用 Material 图标，但图标有一些样式，使图标与文本不对齐。您知道如何将图标与文本对齐吗？
https://jsfiddle.net/u127zxak/1/
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
background-color: red;
display: inline;
}
.alert {
position: relative;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
}
.alert-info {
color: #0c5460;
background-color: #d1ecf1;
border-color: #bee5eb;
}
.alert-info hr {
border-top-color: …2
推荐指数
推荐指数
1
解决办法
解决办法
6011
查看次数
查看次数