jQuery:CSS类的操作—添加样式、删除样式、更改样式名 .

最新推荐文章于 2022-11-10 16:27:23 发布

转载最新推荐文章于 2022-11-10 16:27:23 发布 · 963 阅读

本文详细介绍了如何使用HTML、CSS和JavaScript实现产品详情的显示与隐藏功能，包括更改样式名、使用事件监听器以及利用类切换来控制元素的可见性。

1.更改样式名：

HTML:

<div class="ShowProDescription"> Description du Produit</div>
</a>

<div id="HideProDescription" style="display:none;">
%%Panel.ProductTabs%%
%%Panel.ProductDescription%%
%%Panel.ProductMiscDetails%%
%%Panel.ProductVendorsOtherProducts%%
%%Panel.ProductReviews%%
</div>

CSS:

.ShowProDescription{

padding:8px 0 8px 48px;
color:#555;
width:86%;
margin:10px auto;
background:#e3e3e3 url('../images/mobile/pro_a_left.jpg') no-repeat 18px center;
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
}
.ShowProDescription_Open{
padding:8px 0 8px 48px;
color:#fff;
width:86%;
margin:10px auto;
background:#f27020 url('../images/mobile/pro_a_left_open.jpg') no-repeat 18px center;
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
}