Javascript适用于Chrome，但不适用于IE [英] Javascript works in chrome but not in IE
本文介绍了Javascript适用于Chrome，但不适用于IE的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
刚刚学习JS，但我有这个简单的HTML，使用JQuery，嵌入式JS，完全适用于最新的Chrome，但不适用于IE11？
< HTML>
< head>
< link rel ='stylesheet'type ='text / css'href ='css / styles.css'>
< script type ='text / javascript'src ='jquery.js'>< / script>
< script type ='text / javascript'>
function main（）{
$（'。skillset'）。hide（）;
$（'。skillset'）。fadeIn（1000）;
$（'。projects'）。hide（）;
$（'.projects-button'）。on（'click'，function（）{
// $（this）.next（）。toggle（）;
$（this）.next（）。slideToggle（250）;
$（this）.toggleClass（'active'）;
$（this）.text（'Projects Viewed'）;
}）;
}
< / script>
< / head>
< body>
< h1>精通：< / h1>
< div class ='skillset'>
< div class ='skill-html'>
< h1> HTML& CSS< / H1>
< p class ='description'>
< div class ='projects-button'> Recent Projects< / div>
< ul class ='projects'>
< li>百老汇< / li>
< li> MOVE< / li>
< / ul>
< / p>
< / div>
< div class ='skill-js'>
< h1> JavaScript< / h1>
< p class ='description'>
< div class ='projects-button'> Recent Projects< / div>
< ul class ='projects'>
< li>密码验证器< / li>
< li> Whale Talk< / li>
< / ul>
< / p>
< / div>
< div class ='skill-jquery'>
< h1> jQuery< / h1>
< p class ='description'>
< div class ='projects-button'> Recent Projects< / div>
< ul class ='projects'>
< li>即将推出...< / li>
< / ul>
< / p>
< / div>
< / div>
< script type ='text / javascript'>
$（document）.ready（main）;
< / script>
< / body>
< / html>
CSS文件......
body {
font-family：Helvetica;
填充：2em;
background-color：whitesmoke;
}
h1 {
font-size：2.5em;
}
.skillset {
display：flex;
justify-content：space-between;
flex-wrap：wrap;
}
.skill-html {
background-color：＃E55126;
}
.skill-js {
background-color：＃E5A227;
}
.skill-jquery {
background-color：＃0C73B8;
}
.skill-html，
.skill-js，
.skill-jquery {
宽度：100％;
填充：1em 3em 2em 2em;
保证金：0.5em;
颜色：whitesmoke;
}
.projects-button {
padding：0.75em 1.25em;
background-color：whitesmoke;
不透明度：0.9;
宽度：10em;
颜色：黑色;
}
ul {
list-style：none;
填充：0;
}
.projects {
margin：1em 0;
}
.active {
background-color：＃333333;
颜色：whitesmoke;
}
我的尝试：
没什么，因为我不知道为什么一个浏览器有效，另一个没有。
解决方案
（'。skillset'）。hide（）;
（。技能组 '）淡入（1000）;
（' 项目。）隐藏（）;
Just learning JS but I've got this simple HTML, using JQuery, with embedded JS, that works fully in latest Chrome but not in IE11?
<html>
<head>
<link rel='stylesheet' type='text/css' href='css/styles.css'>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
function main() {
$('.skillset').hide();
$('.skillset').fadeIn(1000);
$('.projects').hide();
$('.projects-button').on('click', function() {
//$(this).next().toggle();
$(this).next().slideToggle(250);
$(this).toggleClass('active');
$(this).text('Projects Viewed');
});
}
</script>
</head>
<body>
<h1>Proficient in:</h1>
<div class='skillset'>
<div class='skill-html'>
<h1>HTML & CSS</h1>
<p class='description'>
<div class='projects-button'>Recent Projects</div>
<ul class='projects'>
<li>Broadway</li>
<li>MOVE</li>
</ul>
</p>
</div>
<div class='skill-js'>
<h1>JavaScript</h1>
<p class='description'>
<div class='projects-button'>Recent Projects</div>
<ul class='projects'>
<li>Password Validator</li>
<li>Whale Talk</li>
</ul>
</p>
</div>
<div class='skill-jquery'>
<h1>jQuery</h1>
<p class='description'>
<div class='projects-button'>Recent Projects</div>
<ul class='projects'>
<li>Coming soon...</li>
</ul>
</p>
</div>
</div>
<script type='text/javascript'>
$(document).ready(main);
</script>
</body>
</html>
CSS file ...
body {
font-family: Helvetica;
padding: 2em;
background-color: whitesmoke;
}
h1 {
font-size: 2.5em;
}
.skillset {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.skill-html {
background-color: #E55126;
}
.skill-js {
background-color: #E5A227;
}
.skill-jquery {
background-color: #0C73B8;
}
.skill-html,
.skill-js,
.skill-jquery {
width: 100%;
padding: 1em 3em 2em 2em;
margin: 0.5em;
color: whitesmoke;
}
.projects-button {
padding: 0.75em 1.25em;
background-color: whitesmoke;
opacity: 0.9;
width: 10em;
color: black;
}
ul {
list-style: none;
padding: 0;
}
.projects {
margin: 1em 0;
}
.active {
background-color: #333333;
color: whitesmoke;
}
What I have tried:
nothing because I don't know why one browser works and another does not.
解决方案
('.skillset').hide();
('.skillset').fadeIn(1000);
('.projects').hide();
这篇关于Javascript适用于Chrome，但不适用于IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
