我想使用jquery:not selector这样一种方式,当一堆元素没有指定的类时,我想在其中一个类中添加一个类.
我想要实现的是:'当design-preview1,design-preview2 design-preview 3和design-preview 4没有"selected"类时,将"selected"类添加到"design-preview1"'.
我试过这个,但它不起作用:
$(".design-preview1, .design-preview2, .design-preview3, .design-preview4").not(".selected").$(".design-preview1").addClass('selected');
});
任何帮助将受到高度赞赏
新
这是我的完整jQuery代码:
$('.pop-design1').click(function(){
$(".design-preview li:not(.design-preview2).selected").removeClass('selected');
$(".design-list li:not(.design-list2).selected").removeClass('selected');
$(".design-preview2").toggleClass('selected');
$(".design-list2").toggleClass('selected');
$(".overlay").toggle();
});
$('.pop-design2').click(function(){
$(".design-preview li:not(.design-preview3).selected").removeClass('selected');
$(".design-list li:not(.design-list3).selected").removeClass('selected');
$(".design-preview3").toggleClass('selected');
$(".design-list3").toggleClass('selected');
$(".overlay").toggle();
});
$('.pop-design3').click(function(){
$(".design-preview li:not(.design-preview4).selected").removeClass('selected');
$(".design-list li:not(.design-list4).selected").removeClass('selected');
$(".design-preview4").toggleClass('selected');
$(".design-list4").toggleClass('selected');
$(".overlay").toggle();
});
if ($('.design-preview1, .design-preview2, .design-preview3, .design-preview4').not('.selected').length) {
$('.design-preview1').addClass('selected');
基本上我想要的是当.design-preview1,.design-preview2,.design-preview3和.design-preview4未显示或未被选中时,我希望.design-preview1默认显示.
实时链接:
http ://www.expertfrontend.com/test/2.html
我正在使用带有下拉列表的bootstrap.我的锚在悬停时有背景颜色.但是当显示下拉列表时,我希望包含下拉列表的父级丢失背景颜色.
我的HTML是:
<nav class="navbar navbar-default av-nav" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav nav-tabs">
<li class="lia li1"><a href="#">Home</a></li>
<li class="dropdown li2"><a class="dropdown-toggle" data-toggle="dropdown">About</a><span class="nav-arrow"></span>
<div class="dropdown-menu">
<ul>
<li><a href="#">Drop 1</a></li>
<li><a href="#">Drop 2</a></li>
<li><a href="#">Drop 3</a></li>
</ul>
</div>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
我的尝试:
$( document ).ready(function() {
var section = $('.av-nav .nav li …我有两个div.
<div class="col-1"><p>Content</p></div>
<div class="col-2"><img src="" alt="" /></div>
每个人都有他们尊重的内容.
我试图将col-2的高度设置为与col-1的高度完全相同.
我尝试使用jQuery:
$(document).ready(function() {
var divHeight = $('.col1').height();
$('.col2').css('min-height', divHeight+'px');
});
问题是col-1没有设置高度.它具有动态高度,当其内容增长时会增长.因此,上面的代码不起作用.
有没有什么办法可以使用jQuery将col-2的最小高度设置为等于col 1的动态高度？
我正在使用jQuery插件将倒数计时器放在我的网页中.目前控制计时器显示内容的代码是:
<script type="text/javascript">
var clock = $('.clock').FlipClock(3600 * 24 * 3, {
clockFace: 'DailyCounter',
countdown: true
});
</script>
插件的JS可以在这里查看:https://github.com/objectivehtml/FlipClock/blob/master/js/flipclock/flipclock.js
可以在此处查看正在使用的代码的示例页面:http: //flipclockjs.com/faces/daily-counter
目前,计时器是3天的倒计时,每次刷新页面时都会重置.我想使用倒数计时器的自定义时间,这将是绝对的(不会通过页面刷新重置).我希望日期是2013年9月30日太平洋标准时间中午12:00(美国西部 - 加利福尼亚时区).
无论如何使用Javascript或jQuery做到这一点？
更新:
我的代码现在是这样的:(工作).
$(document).ready(function(){
$("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).attr("checked",false);
$(this).attr("checked",true);
});
});
HTML:
<input type="checkbox" name="swimming" class="chb" />
<input type="checkbox" name="swimming" class="chb" />
<input type="checkbox" name="swimming" class="chb" />
我有一个问卷类型表格,每个问题有三个复选框,我希望用户只能选择三个中的一个.
我的HTML是这样的:
问题1:
<input type="checkbox" name="ballet" />
<input type="checkbox" name="ballet" />
<input type="checkbox" name="ballet" />
问题2:
<input type="checkbox" name="swimming" />
<input type="checkbox" name="swimming" />
<input type="checkbox" name="swimming" />
但这允许用户选择特定问题的所有复选框.我希望它能够只选择三个中的一个.这个问题有方法解决吗？
谢谢
我有一个锚标记，将其悬停时，我希望显示一个div（“标记”）。div不在锚标记内。
HTML如下：
<a href="#" class="mark"></a>
<div class="icontent">
<p>
lorem ipsum dolor sit amet......
</p>
</div>
当鼠标悬停在“ .mark”上时，应显示“ .icontent”。当鼠标移出时，“。icontent”应再次隐藏。是否还可以向其添加1秒过渡？
谢谢
我有一个多级侧边栏导航树，里面有很棒的字体图标。我希望图标在展开时从加号变为减号，在折叠时返回加号。单击一个 li 项目不应影响另一 li 项目的状态。
这是我正在使用的 jQuery 脚本：
$('.tree-toggle').click(function () {
$(this).parent().children('ul.tree').toggle(1);
$(this).parent().toggleClass('active');
});
$('.aside-list li').click(function(){
$(this).children('label').children('i').toggleClass('fa-plus-square fa-minus-square')
$(this).children('label').children('i').toggleClass('fa-caret-up fa-caret-down')
});
这是我的 HTML 结构：
<div class="well">
<ul class="nav nav-list aside-list">
<li>
<label class="tree-toggle nav-header">Category <i class="fa fa-caret-down"></i></label>
<ul class="nav nav-list tree">
<li><label class="tree-toggle nav-header"><i class="fa fa-plus-square"></i> In id sodales leo</label>
<ul class="nav nav-list tree">
<li><label class="tree-toggle nav-header"><i class="fa fa-plus-square"></i> Tortor masa</label>
<ul class="nav nav-list tree">
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Adipiscing elit</a></li>
<li><label class="tree-toggle nav-header"><i class="fa fa-plus-square"></i> Integro …我有一个页面，但是当我调整浏览器窗口大小时，背景颜色会被削减。我希望颜色扩展到整个浏览器宽度。我的一个 div 比其他的大。解决这个问题的方法是什么？
CSS 如下：
@charset "utf-8";
/* ==========================================================================
RESET STYLES
========================================================================== */
* {
margin: 0; padding: 0;
}
html,
button,
input,
select,
textarea {
color: #222;
}
body {
font-size: 1em;
line-height: 1.4;
}
img {
border: 0 none;
}
/* ==========================================================================
BASE STYLES
========================================================================== */
html {
height: 100%;
}
body {
font-family: Arial, Helvetica Sans-serif;
width: 100%;
height: 100%;
color: #595959;
}
.col-full {
width: 1014px;
margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 …