我希望你能帮助我。我不会撒谎;我是ASP.Net的新手。我忙于一门课程; 在Pluralsight上使用ASP.NET 5,MVC 6,EF7和AngularJS 构建Web应用程序,但无法为我的问题找到解决方案:
我的问题: 似乎jquery适用于某些功能,但不适用于其他功能。它用于更新/更改用户名和菜单警报。崩溃不起作用,改变主块颜色的功能也不起作用(这个特定的功能适用于Firefox中的大约3次测试,但从未在Chrome中使用过。)
项目的一些细节:
我已经通过bower.json方法安装了所需的软件包 (下图):
{ " name":" ASP.NET", "私人":是的, "依赖性&#34 ;: "下划线":" ~1.8.3", " jquery":" ~2.1.4" } }
这是我的index.html代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" />
<title>The World</title>
<link href="css/site.css" rel="stylesheet" /> </head> <body>
<div id="sidebar">
<img src="img/SamHastings.jpg" alt="headshot" class="headshot" />
<span id="username">Sam Hastings</span>
<ul class="menu">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="wrapper">
<div id="main">
<div>
<button id="sidebarToggle">Toggle Menu</button>
</div>
<h1>The World</h1>
<p>This will be a fun website soon!</p>
<form>
<div>
<label>Date</label>
<input />
</div>
<div>
<label>Location</label>
<input />
</div>
<div><input type="submit" value="Add" /></div>
</form>
</div>
<div id="footer">
© 2015 The World Ltd.
</div>
</div>
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="js/site.js"></script> </body> </html>
这是我的site.js代码:
var ele = $("#username");
ele.text("Corne le Roux");
var main = $("#main");
main.on("mouseenter", function () {
main.style = "background-color: #888;";
});
main.on("mouseleave", function () {
main.style = "";
});
var menuItems = $("ul.menu li a");
menuItems.on("click", function () {
var me = $(this);
alert(me.text());
});
var sidebarAndWrapper = $("#sidebar,#wrapper");
$("sidebarToggle").on("click", function () {
sidebarAndWrapper.toggleClass("hide-sidebar");
if (sidebarAndWrapper.hasClass("hide-sidebar")) {
$(this).text("Show Sidebar");
} else {
$(this).text("Hide Sidebar");
}
});
})();
这是我的css:
#sidebar {
background: #2a2c36;
color: #eee;
position: fixed;
height: 100%;
width: 250px;
overflow: hidden;
left: 0;
margin: 0;
-moz-transition: left ease .25s;
-o-transition: left ease .25s;
-webkit-transition: left ease .25s;
transition: left ease .25s;
}
#sidebar.hide-sidebar {
left: -250px;
-moz-transition: left ease .25s;
-o-transition: left ease .25s;
-webkit-transition: left ease .25s;
transition: left ease .25s;
}
#wrapper {
margin: 0 0 0 250px;
-moz-transition: margin-left ease .25s;
-o-transition: margin-left ease .25s;
-webkit-transition: margin-left ease .25s;
transition: margin-left ease .25s;
}
#wrapper.hide-sidebar {
margin-left: 0;
-moz-transition: margin-left ease .25s;
-o-transition: margin-left ease .25s;
-webkit-transition: margin-left ease .25s;
transition: margin-left ease .25s;
}
我提前谢谢你了!
答案 0 :(得分:0)
您好我按照相同的教程,我解决了这个问题:
var main = $("#main");
main.on("mouseenter", function () {
main.css("background-color", "#888");
});
main.on("mouseleave", function () {
main.css("background-color", "");
});