我一直试图模仿别人的代码,但没有运气.如何让Div1切换边距左边:点击DivButton时为30%？谢谢.
HTML
<div id="Div1"></div>
<br><br>
<div id="DivButton"></div>
CSS
#Div1{
background:blue;
width:50%;
height:50px;
margin-left:0%;
}
#DivButton{
background:green;
width:20px;
height:20px;
}
JS
$('#DivButton').click(function(){
});
/*
var toggleWidth = $("#Div1").width() == 365 ? "98%" : "365px";
$('#Div1').animate( {'width': toggleWidth}, 300, resize);
*/
/*
var toggleMargin = $("#Div1").marginLeft() == 30% ? "10%" : "30%";
$('#Div1').animate( {'margin-left': toggleMargin}, 300, resize);
*/
这是codepen:http://codepen.io/BrandonJF/pen/KGwyC
如果无法访问页面,则下面是代码的副本.
现在,我一直在做的是使用Brackets,并在Brackets中打开一个文件夹,其中包含一个完全空白的 style.css页面,完全空白的 init.js页面,以及一个几乎空白的index.html页面(此页面至少包含以下内容)码:
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head>
</head>
<body>
</body>
</html>
我将CodePen HTML粘贴到index.html的body标签中.我将CodePen CSS粘贴到style.css中.我将CodePen Javascript粘贴到init.jss中我还尝试将CodePen Javascript粘贴到index.html的body标签中,使用JS代码周围的标记"script".
我有什么想法我做错了吗？
太无能了!
CodePen HTML:
<div id="container">
<header>
<h1>Task List</h1>
<a href="#" id="clear">Clear all</a>
</header>
<section id="taskIOSection">
<div id="formContainer">
<form id="taskEntryForm">
<input id="taskInput" placeholder="What would you like to do today?" />
</form>
</div>
<ul id="taskList"></ul>
</section>
</div>
CodePen CSS:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);
* {
padding:0;
margin:0;
}
body {
background:url('http://dribbble.com/images/attachments/attachments-bg.png?1');
background-color:#2a2a2a;
font-family:'Open Sans', …这是我的 jfiddle：http : //jsfiddle.net/6mfb1kL0/
HTML
<div id="SearchDiv">
Hello there...
</div>
<button type="button" onClick="changeHeight();">Click Me!</button>
CSS
#SearchDiv{
background-color:red;
width:1000px;
height:20px;
}
JS
function changeHeight() {
document.getElementById('SearchDiv').style.height = "200px";
}
我有一个<div></div>包含8行和2列的HTML 表:食物和卡路里.我想使用javascript将文本插入特定单元格.
我有一个html输入文本框,用户可以在其中输入一种食物(8种选择中).
某些食物总是放在某些行中.例如,
Apple = Row 1
Banana = Row 2
Blueberry = Row 3
etc...
用户的条目始终位于第1列.网站自动返回的卡路里计数始终位于第2列.
我想要发生的事情: 当用户输入食物时,它应根据所选择的食物放入适当的行(假设用户选择Apple,因此在本例中属于第1行第1列).
如果第1行第1列由用户的条目填充,则第1行第2列将自动填充卡路里数(现在,将手动插入代码中).
当用户输入下一份食物时,它会再次进入相应的行.让我们说第4行第1列.然后第4行第2列将自动填充卡路里计数.
我不确定JQuery是否能够将文本排序到特定的行/列中.
CSS:
div { display:table-cell; border:1px solid; }
HTML:
<div id=master>
one<br>two
</div>
<div>
three
</div>
任何人都可以协助这个代码吗？