10/10/2018, 11:44
Jquery không chạy trên ie
Tôi có làm một số Vd về jquery, VD như tạo tabs.
Khi thực hiện xong thì chạy trên firefox thì rất ok, nhưng chạy trên ie thì không được
Bác nào rành về jquery thì giúp mình với.
Đây là đoạn code của mình:
file html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style_tabbed.css" rel="stylesheet" type="text/css">
<script src="jquery-1.3.2.min.js" type="application/javascript"></script>
<script>
$(function() {
$('a.tab').click(function(){
$('active').removeClass('active');
$(this).addClass('active');
$('.content').slideUp();
var content_show = $(this).attr('title');
$('#'+ content_show).slideDown();
})
});
</script>
<body>
<div id="tabbed_nav" class="tabbed_nav">
<h4>Site Nav Example</h4>
<div id="tabbed_area" class="tabbed_area">
<ul class=tabs>
<li><a href="#" title="featured" class="active tab">featured</a></li>
<li><a href="#" title="news" class="tab">news</a></li>
<li><a href="#" title="example" class="tab">example</a></li>
</ul>
<div id="featured" class="content">
<p>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</p>
</div>
<div id="news" class="content">
<p>
<ul>
<li>af asdf</li>
<li>ba fasff</li>
<li>cf asfasfasf</li>
</ul>
<ul>
<li>aas faerwr</li>
<li>bwrwer</li>
<li>cwrwqererqw</li>
</ul>
</p>
</div>
<div id="example" class="content">
<p>
<ul>
<li>a2321sdfsaf sf</li>
<li>b324312 fdfas fasf</li>
<li>c234as fasd fsaffafaff</li>
</ul>
<ul>
<li>a4324f dsfsdafasfs</li>
<li>b2342</li>
<li>c fsaasf safafewrw</li>
</ul>
<ul>
<li>afsd saf safae</li>
<li>bdsf sdafsafe</li>
<li>c afsdfadsferqwer</li>
</ul>
</p>
</div>
</div> <!--end tabbed_area-->
</div> <!--end tabbed_nav-->
</body>
</html>
Khi thực hiện xong thì chạy trên firefox thì rất ok, nhưng chạy trên ie thì không được
Bác nào rành về jquery thì giúp mình với.
Đây là đoạn code của mình:
file html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style_tabbed.css" rel="stylesheet" type="text/css">
<script src="jquery-1.3.2.min.js" type="application/javascript"></script>
<script>
$(function() {
$('a.tab').click(function(){
$('active').removeClass('active');
$(this).addClass('active');
$('.content').slideUp();
var content_show = $(this).attr('title');
$('#'+ content_show).slideDown();
})
});
</script>
<body>
<div id="tabbed_nav" class="tabbed_nav">
<h4>Site Nav Example</h4>
<div id="tabbed_area" class="tabbed_area">
<ul class=tabs>
<li><a href="#" title="featured" class="active tab">featured</a></li>
<li><a href="#" title="news" class="tab">news</a></li>
<li><a href="#" title="example" class="tab">example</a></li>
</ul>
<div id="featured" class="content">
<p>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</p>
</div>
<div id="news" class="content">
<p>
<ul>
<li>af asdf</li>
<li>ba fasff</li>
<li>cf asfasfasf</li>
</ul>
<ul>
<li>aas faerwr</li>
<li>bwrwer</li>
<li>cwrwqererqw</li>
</ul>
</p>
</div>
<div id="example" class="content">
<p>
<ul>
<li>a2321sdfsaf sf</li>
<li>b324312 fdfas fasf</li>
<li>c234as fasd fsaffafaff</li>
</ul>
<ul>
<li>a4324f dsfsdafasfs</li>
<li>b2342</li>
<li>c fsaasf safafewrw</li>
</ul>
<ul>
<li>afsd saf safae</li>
<li>bdsf sdafsafe</li>
<li>c afsdfadsferqwer</li>
</ul>
</p>
</div>
</div> <!--end tabbed_area-->
</div> <!--end tabbed_nav-->
</body>
</html>
Bài liên quan
<script>
$(function() {
$('a.tab').click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
$('.content').slideUp();
var content_show = $(this).attr('title');
$('#'+ content_show).slideDown();
});
});
</script>
* { margin:0; padding:0}
#tabbed_nav{
margin:0px auto;
width:350px;
}
.tabbed_nav h4{
font-family:arial,helvetica,sans-serif;
padding-bottom:20px;
font-size:20px;
margin-top:20px;
text-align:center;
}
.tabbed_area {
border: solid 1px #494e52;
padding:10px 20px;
background:#183d57;
}
ul.tabs {
overflow: hidden;
margin:5px 0px 0px 0px;
}
ul.tabs li {
list-style:none;
display:inline;
}
ul.tabs li a {
text-decoration:none;
display:block;
float:left;
color:white;
width:99px;
border:0px;
text-transform:uppercase;
}
.active {
color:#3388cc;
}
.active a{
color:#3388cc;
}
.content{
background:#3388cc;
width:270px;
padding:10px;
position:relative; z-index:1000;
}
.content ul {
list-style:none;
margin: 0px;
}
.content ul li{
border-bottom: 1px solid #b3beff;
padding: 10px 0px;
}
.content li:last-child{ border-bottom:none;}
#news, #example {
display:none;
}
Mình cũng thử chạy trên local rồi nhưng cũng không được bác à