jQuery手风琴标签的颜色问题
jQuery Accordion tab color issue
我有一个问题,我的Accordion的选项卡保持颜色,我希望他们在某些时间保持。
我希望选项卡在默认情况下保持乳白色,并在光标悬停时更改为深灰色。当您单击选项卡时,它将变为活动并将颜色更改为青色。麻烦的是,当我有一个选项卡打开,并单击另一个选项卡,第一个选项卡将保持青色。当我点击一个标签,然后再次点击它来滑动内容的时候悬停功能使标签变成深灰色就不起作用了
我希望它是青色只有在活动和内容显示时,当没有内容显示和块关闭时,我希望颜色去奶油白色和在光标悬停的深灰色。
代码:$(document).ready(function(){
$(".tab").click(function(){
$(".tab").removeClass("tab-active");
$(this).addClass("tab-active");
var current_state=$(this).next().css("display");
$(".contents").slideUp();
if(current_state!="block")
{
$(this).next().slideDown();
}
if($(this).hasClass("tab-active")==true && current_state!="block")
{
$(this).css({"backgroundColor":"cyan","color":"black"});
}
else
{
$(this).css({"backgroundColor":"#E6E6E6"});
}
});
});
CSS: .container{width:100%; float:left;}
.tab-container{width:800px; min-height:300px; float:left; margin-top:100px; margin-left:300px;}
.tab{border:1px solid black; width:798px; height:26px; border-radius:5px; float:left; background-color:#E6E6E6;}
p{float:left; margin-left:10px; margin-top:1px; font-size:22px;}
.content-active{display:block;}
.contents{border:1px solid black; width:800px; min-height:30px; float:left; display:none;}
.tab:hover{background-color:#A4A4A4; color:white; cursor:pointer;}
HTML: <body>
<div class="container">
<div class="tab-container">
<div class="tab tab-active">
<p>Beer</p>
</div>
<div class="contents content-active">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum</span>
</div>
<div class="tab">
<p>Wine</p>
</div>
<div class="contents">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum</span>
</div>
<div class="tab">
<p>Juice</p>
</div>
<div class="contents">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum</span>
</div>
<div class="tab">
<p>Water</p>
</div>
<div class="contents">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum</span>
</div>
<div class="tab">
<p>Soda</p>
</div>
<div class="contents">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum</span>
</div>
</div>
</div>
</body>
问题是你的jQuery在活动选项卡上应用了内联样式,而且它永远不会消失。一个更好的解决方案是从JS中删除这些行,并简单地将样式分配给类.tab-active
。
切:
if($(this).hasClass("tab-active")==true && current_state!="block") {
$(this).css({"backgroundColor":"cyan","color":"black"});
} else {
$(this).css({"backgroundColor":"#E6E6E6"});
}
并添加到你的CSS:
.tab-active {
background-color: cyan;
}
相关文章:
- Javascript if语句问题,以及如何在jquery中验证颜色
- 单击按钮更改颜色/清除画布时画布出现问题
- 颜色变化基于所列问题的编号
- YUI2 颜色选取器默认值问题
- 常见问题下拉列表 - 单击时文本颜色已更改
- 具有可选行的交替颜色行表的问题
- 条形图 d3.js 的颜色出现问题
- 颜色框的水平滚动问题
- Jquery 边框颜色切换问题
- 图像魔术裁剪 svg 问题:丢失所有颜色
- 堆栈溢出问题突出显示颜色
- 更改googlemapapi标记颜色的问题
- Yii颜色选择器更改事件问题
- CSS背景颜色问题
- 使用javascript更改标签颜色时出现问题
- 在dc.js柱状图上的颜色问题,当过滤到一个狭窄的范围
- jQuery手风琴标签的颜色问题
- HTML到PDF转换器由jspdf, Bg颜色问题
- 导航颜色问题
- 两条SVG线重叠时的颜色问题