我的HTML第一次看起来很完美,但如小提琴所示,当点击按钮时,我想隐藏/显示一些.show元素.当我隐藏它们时,CSS就会被破坏.我不知道我错过了什么.
HTML:
<div>
<span class="show">box</span>
<span class="show">box</span>
<span class="show">box</span>
<span class="show">box</span>
<span class="show">box</span>
<span class="show">box</span>
<span class="show">box</span>
<span class="show">box</span>
</div>
<input type="button" id="button" value="click" />
Run Code Online (Sandbox Code Playgroud)
CSS:
div .show:nth-of-type(-n+4) {
margin-top:0;
}
div .show:nth-of-type(4n) {
margin-right:0;
}
Run Code Online (Sandbox Code Playgroud)
JS:
$("#button").click(function () {
$("span:eq(0),span:eq(2)").toggle().toggleClass("show");
});
Run Code Online (Sandbox Code Playgroud)
任何帮助,将不胜感激.
谢谢你的时间.
如何使用jquery循环动画功能?我有
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$(".b").click(function(){
var a=$(".abb");
a.animate({top:'100px',left:'400px'},"slow");
a.animate({top:'20px',left:'500px'},"slow");
a.animate({top:'500px',left:'100px'},"slow");
a.animate({top:'100px',left:'800px'},"slow");
a.animate({top:'200px',left:'100px'},"slow");
a.animate({top:'300px',left:'0px'},"slow");
a.animate({top:'600px',left:'300px'},"slow");
a.animate({top:'100px',left:'700px'},"slow");
a.animate({top:'300px',left:'100px'},"slow");
});
});
</script>
</head>
<body>
<button class="b"> click </button>
<div class="abb" style="width:100px;height:100px;background:#9F0;position:absolute;border-radius:70px;box-shadow:#000 1px 1px 3px 2px;"></div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
我希望上面的脚本能够持续工作.请协助
我有多个选择框,在这样的形式:
<form action="foo" method="post" id="form">
<select id="one">
<option value="foo1"></option>
<option value="foo2"></option>
<option value="foo3"></option>
</select>
<select id="two">
<option value="bar1"></option>
<option value="bar2"></option>
<option value="bar3"></option>
</select>
<select id="three">
<option value="baz1"></option>
<option value="baz2"></option>
<option value="baz3"></option>
</select>
</form>
Run Code Online (Sandbox Code Playgroud)
现在,如果这三个盒子中的任何一个改变了,我想知道它们中的哪一个.我试着像下面那样,但我只得到第一个盒子的id.我是否必须为每个选择编写它,或者有没有办法获取更改的选择框的ID?
$(document).ready(function() {
$('#form').change(function() {
var strChosen = $('select').attr('id');
alert(strChosen);
});
});
Run Code Online (Sandbox Code Playgroud) 我试图将span内部的文本对齐h1到h1块的底部.
HTML
<h1>
Left
<span>Right and Bottom</span>
</h1>
Run Code Online (Sandbox Code Playgroud)
CSS
h1 {
font-size: 2em;
}
h1 span {
float: right;
font-size: 0.5em;
vertical-align: bottom;
}
Run Code Online (Sandbox Code Playgroud)
这最终看起来像下面 - 任何人都可以建议我能做什么?

非常感谢!
MyServlet 转发到 Mypage.jsp 作为
request.getRequestDispatcher("/pages_homepage.jsp?value="+count).forward(request, response);
Run Code Online (Sandbox Code Playgroud)
其中 count 是生成的整数值
下面是我的 JSP 代码(Mypage.jsp),
<body onload="getPage('<%request.getParameter("value");%>')">
<div id="app"></div>
</body>
Run Code Online (Sandbox Code Playgroud)
下面是我的javascript代码,
function getPage(match){
var arr = new Array();
var ele = document.getElementById('app');
for(var i=0;i<match;i++){
var newdiv = document.createElement("label");
newdiv.id = arr[i];
newdiv.value="Page";
ele.appendChild(newdiv);
}
}
Run Code Online (Sandbox Code Playgroud)
我想要的是,我希望“页面”显示“匹配”次数。但是我无法通过上面的代码做到这一点。他们的 js 代码可能有问题。任何人都可以建议我进行任何更正吗?提前致谢。
我想从谷歌加载jQuery,但总是无法加载.我的源代码有什么问题?
错误
(X) GET file://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
Run Code Online (Sandbox Code Playgroud)
码
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta content='IE=8' http-equiv='X-UA-Compatible'>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="">
<title></title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>console.log($('body').height());</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud) 我正在努力使我的按钮在新标签中打开一个网址.
我可以使用window.location.href让它工作,但是url不会以新方式打开.
我正在使用jQuery和Javascript,代码本身就是一个更大的jQuery函数.
$('#code').click(function(){
window.location.href = 'http://www.example.com'
});
Run Code Online (Sandbox Code Playgroud)
该按钮在页面加载时没有href属性.
<button id="code" type="submit" class="btn btn-success" style="width:400px;"><span class="glyphicon glyphicon-download"></span> Generate Code</button>
Run Code Online (Sandbox Code Playgroud)
我尝试过使用.attr和.prop虽然它也没有用.我对这些东西不熟悉所以我可能只是做错了什么.
我愿意为按钮添加href或使用.click函数或其他任何东西,我只需要打开一个新选项卡.
编辑::好的,更多解释.
在页面加载时,按钮onclick启动一个计时器,增加进度条.进度条完成后,我希望按钮打开一个链接.
只是想知道它为什么不提醒?
我确信我的变量也是正确的并且也存在于此上下文中.
if ($(".side-nav .nav").hasClass("features").toString()) {
alert('test');
}
Run Code Online (Sandbox Code Playgroud)
为了测试它,我试图添加!在前面和一个不存在的类:
if (!$(".side-nav .nav").hasClass("whatever").toString()) {
alert('test');
}
Run Code Online (Sandbox Code Playgroud)
它的工作原理.
如何将文本和图像放在同一行中,例如居中于图像?我尝试了一些方法,比如vertical-align:middle; 显示:内联; 但不工作......我的错误在哪里?
现在:

我的css代码:
<style>
.entryDetailX {
float: right;
background: #2B587A;
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-right-radius: 8px;
font-weight: bold;
color: #FFF;
padding: 6px;
}
.date {
float: right;
font-size: 9px;
padding-top: 1px;
background: url(/content/themes/mavi/img/custom/icon_time16x16.png) top left no-repeat;
padding-left: 20px;
margin-right: 10px;
}
.nick {
float: right;
margin-right: 20px;
color: #cc9900;
background: url(/content/themes/mavi/img/custom/icon_user16x16.png) top left no-repeat;
padding-left: 20px;
}
</style>
Run Code Online (Sandbox Code Playgroud)
HTML:
<div class="entryDetailX">
<span class="date">18.01.2011 00:50:55</span>
<a class="nick">phantasm</a>
</div>
Run Code Online (Sandbox Code Playgroud)
谢谢
我有进度条,但它不会在 chrome 中改变颜色。这是一个代码:
progress.xp::-webkit-progress-value:{
background: #66CC33;
}
Run Code Online (Sandbox Code Playgroud)
我查找了它,它似乎没问题,但它不起作用。
也许我不能在这种代码中使用类?或以其他方式?