我有一个列表标签,如果销售有活动类,它应该显示sale_dim div否则rent_dim div应该是可见的
<ul class="saleFlagSelector">
<li><a href="/ajax-search-forms?sf=true" class="sale ">For sale</a></li>
<li><a href="/ajax-search-forms?sf=false" class="rent active ">For rent</a></li>
</ul>
<div id="sale_dim">...</div>
<div id="rent_dim">...</div>
这是jquery函数
$(function() {
$('#sale_dim').show();
$('#rent_dim').hide();
$(ul.saleFlagSelector li a).click(function(){
if($('.sale').hasClass('active')){
$('#sale_dim').show();
$('#rent_dim').hide();
} else {
$('#sale_dim').hide();
$('#rent_dim').show();
}
});
});
我能告诉我哪里错了吗?
答案 0 :(得分:2)
你可以像这样使用它。每当您更改活动类销售或租用锚标签时,您都可以调用此功能。此外,如果要动态添加活动类,请使用jquery .on函数切换div显示。
function hideSaleAndRentDim(){
if($('.sale').hasClass('active'))
{
$('#sale_dim').show();
$('#rent_dim').hide();
} else if($('.rent').hasClass('active'))
{
$('#sale_dim').hide();
$('#rent_dim').show();
};
}
$(document).ready(function(){
hideSaleAndRentDim();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="saleFlagSelector">
<li><a href="/ajax-search-forms?sf=true" class="sale ">For sale</a></li>
<li><a href="/ajax-search-forms?sf=false" class="rent active">For rent</a></li>
</ul>
<div id="sale_dim">Sale Dim</div>
<div id="rent_dim">Rent Dim</div>