在下面的代码,不应该之间的裕度.box1和.box2被20像素作为.box1具有10px的底部边缘和.box2具有10px的上边距.
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
CSS:
.box1{
margin-bottom: 10px;
}
.box2{
margin-top: 10px;
}
我想用jQuery获取所有输入字段的值.我可以用以下代码来做到这一点.但是,如果输入字段是复选框,并且选中它,则它将返回" on ".如果选中,如何将值设为1？
jQuery的:
$('button').click(function() {
inputs = $('.input');
inputs.each(function() {
var value = $(this).val();
alert(value);
});
});
HTML:
<input type="text" class="input" />
<input type="text" class="input" />
<input type="checkbox" class="input">
<button>Get values<button>
我想在焦点上向左侧展开一个搜索框.以下代码将扩展,但它将向右扩展.无论如何将它扩展到左边？
HTML:
<input type="text" placeholder="search">
CSS:
input[type="text"] {
background: #444;
border: 0 none;
color: #d7d7d7;
width:50px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
margin:3px 12px;
}
input[type="text"]:focus {
background:#ccc;
color: #6a6f75;
width: 120px;
margin:3px 12px;
outline: none;
}
input[type="text"] {
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
我想使用字体真棒图标作为自动生成的标记,我无法改变它.
以下标记将显示ol列表.我想用图标替换数字.
<ol class="flex-control-nav">
<li><a class="flex-active">1</a></li>
<li><a class="">2</a></li>
<li><a class="">3</a></li>
<li><a class="">4</a></li>
<li><a class="">5</a></li>
</ol>
这是我正在尝试的:
.flex-control-nav a:before {
font-family: FontAwesome;
font-size: 30px;
display: inline-block;
content: '\f137';
}
问题:
使用上面的代码,我可以在每个列表项中显示图标,但数字也在那里.我想隐藏数字.我尝试过使用text-indent,但也删除了图标.
我有#div1和#div2.隐藏时#div默认可见#div2.点击链接时,我想要隐藏#div1和显示#div2,再次点击我要隐藏的链接#div2并#div1再次显示.
使用以下jQuery我可以隐藏第一个div并显示#div2,但我不知道#div1在同一个链接上再次单击时如何显示.另外如何根据可见div切换链接标题(即切换到div1或div2)
HTML:
<a class="switch" href="#">Switch to Div 2</a>
<div id="div1">Div1</div>
<div id="div2">Div2</div>
jQuery的:
$(".switch").click(function() {
$('#div1').hide();
$('#div2').show();
});
CSS:
#div2 {
display: none;
}
在图像悬停时,我想放大图像并显示带有透明背景的div.
演示: http ://jsfiddle.net/9q4mT/
这是我的代码.在下面的示例中,当我将鼠标悬停在.image类中的图像上时,我想要缩放它,并希望.mylink在div的中心显示带有类的链接.
我能够放大悬停但是当我为.text添加样式时,它不再放大图像.
HTML:
<div id="box">
<div class="image">
<img src="http://s18.postimg.org/il7hbk7i1/image.png" />
</div>
<div class="text">
<a class="mylink">link</a>
</div>
</div>
CSS:
#box {
text-align: center;
margin: auto;
width: 250px;
height: 250px;
overflow: hidden;
position: relative;
}
.image img {
width: 250px;
height: 250px;
overflow: hidden;
}
.image img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.image img:hover {
cursor: …我正在使用jQuery slideToggle功能和媒体查询.
问题是当我将窗口调整为小尺寸时,会出现切换链接.现在,如果我点击切换,它可以正常工作,但是当我将窗口调整为大尺寸时,隐藏元素仍然不会出现.
如果我没有点击切换链接,并将窗口大小调整为大尺寸,它可以正常工作.
演示看到问题:
请在这里查看演示,在那里可以看到问题:http: //jsfiddle.net/3Jj7J/
将窗口大小调整为您看到"主菜单"链接的小尺寸.单击它时,您将看到切换.现在,如果您将其重新调整为大尺寸,则仍会显示正常链接.
这是我的代码:
HTML:
<div class="bar">
<a class="toggle" href="#">MAIN MENU</a>
</div>
<div class="nav">
<div class="wrap">
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
CSS:
.bar{
display: none;
border: 1px solid red;
}
@media screen and (max-width: 500px) {
.nav ul {
display: none;
}
.bar{
display: block;
}
}
jQuery的:
var menu = jQuery('.nav .wrap > ul');
jQuery(".toggle").click(function() {
menu.slideToggle(500);
});
我有以下HTML标记.连续有两个.item div,每个div都有不同的高度.
是否可以在不改变标记的情况下清除每秒后的浮点数？每秒都有一个.last-item类.
HTML:
<div class="wrap">
<div class="item"></div>
<div class="item last-item"></div>
<div class="item"></div>
<div class="item last-item"></div>
</div>
CSS:
.wrap{
border: 1px solid #000;
width: 200px;
overflow: hidden;
}
.item{
width: 50%;
background: yellow;
margin-bottom: 10px;
float: left;
}
在单击链接时,我想显示一个div并在该div中添加另一个链接.然后我想在附加链接上使用click功能.
在下面的代码中,"click"链接上的click功能不起作用.我无法弄清楚这个问题.我将不胜感激任何帮助.
请检查JsFiddle以查看问题.
演示: http ://jsfiddle.net/QYL3x/
jQuery的:
$('.big-link').click(function(e){
$('#myDiv').append('<a class="link" href="#">Click</a>');
});
$('.link').click(function(e){
alert("clicked");
});
HTML:
<a href="#" class="big-link" data-reveal-id="myDiv">Fade</a>
<div id="myDiv" class="reveal-modal"></div>
我想使用以下标记在第一个输入字段之前添加一些内容:before.使用的原因:之前是标记无法更改.
我正在尝试这个,但不起作用:
HTML:
<p class="submit">
<input id="submit" type="submit" value="Post" name="submit">
<input id="" type="hidden" value="" name="">
</p>
CSS:
.submit input:before{
content:"Test ";
}
这可行,但我想将内容放在.submit中:
.submit:before{
content:"Test ";
}
我有以下html标记.我想将css样式应用于limain的直接子项ul.我不想选择嵌套在里面的li项目li.我怎样才能做到这一点？
在下面的代码中,我想只选择"主项目1"和"主项目2".我正在尝试>运算符,但它不起作用.
HTML:
<div class="nav">
<ul>
<li><a>Main item 1</a></li>
<li><a>Main item 2</a>
<ul>
<li><a>sub item 1</a></li>
<li><a>sub item 2</a></li>
</ul>
</li>
</ul>
</div>
CSS:
.nav > ul li a:hover{
color: red;
}
我正在使用一个非常简单的代码在滚动上制作一个粘性元素.
我想制作.top sticky,它包裹在.wrap中.当我向下滚动时,我想设置与包裹相关的.top的位置(这样它从左边开始:0与.wrap相关,与身体无关.我想把它保留在.wrap中.我怎么能这样做？谢谢.
jQuery的:
var top = $('.top').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top){
$('.top').addClass('sticky');
}
else{
$('.top').removeClass('sticky');
}
});
CSS:
.wrap{
width: 300px;
border: 1px solid green;
margin: 0 auto;
height: 1000px;
}
.top{
background: green;
height: 100px;
}
.sticky{
position: fixed;
top: 0;
left: 0;
width: 100%;
}
我想获取以逗号分隔的变量中所有字段的值。例如：1,2,3
下面的代码可以正常工作，但它也只在最后一个值的末尾添加逗号。我怎样才能删除它？
fields = $('.wrap').find('.text');
var data = '';
fields.each(function() {
var value = $(this).val();
if ( value != '' ) {
data += ' ' + value + ',';
}
});
alert(data);
JSFiddle： http : //jsfiddle.net/cn5Gt/