如何根据产品点击在特定div同一页面上显示不同产品的产品说明？
如何根据产品点击在特定div同一页面上显示不同产品的产品说明？
提问于 2018-08-04 04:32:09
我想做一个电子商务网站。在产品页面中，我们有一个产品图像列表，并在产品图像上悬停链接，我们需要显示不同产品的不同描述。在这里我附加了一些代码。适用于一个或两个产品。我需要申请很多产品。请帮帮我
<script type="text/javascript" language="javascript">
function hide(id){
var element = document.getElementById(id);
element.style.display = "none";
}
function show(id){
var element = document.getElementById(id);
element.style.display = "";
}
function toggle(id){
var element = document.getElementById(id);
element.style.display = (element.style.display == "") ? "none" : "";
}
function showDetail(){show("view-details");hide("view-summary");}
function showSummary(){show("view-summary");hide("view-details");}
</script>
<a onclick="showDetail()" class="text" href="#">Mirror</a> |
<a onclick="showSummary()" class="text" href="#">Trolley</a>
<p>
<div id="view-details" style="display:none;border:1px solid red;">
im mirror
</div>
<div id="view-summary" style="display:none;border:1px solid blue;">I'm Trolley</div>
</p>回答 2
Stack Overflow用户
发布于 2018-08-04 05:00:31
尽管有可能，您也可以在不使用JavaScript的情况下创建您想要的内容。例如，通过使用HTML和CSS，您可以执行此操作并创建悬停效果来显示产品详细信息。下面是一个例子。
.products {
display: flex;
flex-flow: column wrap;
}
.product #view-details {
display: none;
}
.product:hover #view-details {
display: block;
}
.product {
display: flex;
flex-flow: column no-wrap
}<div class="products">
<div class="product">
<img src="https://www.thakehamfurniture.co.uk/productimages/antique-convex-mirror-31-L.jpg" width="200px" height="200px">
<div id="view-details">
<h3>Details:</h3>
<p>I'm mirror</p>
</div>
</div>
<div class="product">
<img src="http://www.horme.com.sg/Images/product/20131128101131F6MGSX6EGACPH_full.jpg" width="200px" height="200px">
<div id="view-details">
<h3>Details:</h3>
<p>I'm a trolley</p>
</div>
</div>
</div>
Stack Overflow用户
发布于 2018-08-04 04:51:12
是像这样吗？
function hide(){
var all = $('#products div');
$(all).css("display","none");
}
function show(id){
hide();
var element = document.getElementById(id);
element.style.display = "";
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="products">
<a onclick="show('id-1')" class="text" href="#">Mirror</a> |
<a onclick="show('id-2')" class="text" href="#">Trolley</a> |
<a onclick="show('id-3')" class="text" href="#">Mirror 2</a> |
<a onclick="show('id-4')" class="text" href="#">Trolley 3</a>
<p>
<div id="id-1" style="display:none;border:1px solid red;">
im mirror
</div>
<div id="id-2" style="display:none;border:1px solid blue;">I'm Trolley</div>
<div id="id-3" style="display:none;border:1px solid red;">
im mirror 333
</div>
<div id="id-4" style="display:none;border:1px solid blue;">I'm Trolley 444</div>
</p>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51679758
复制相关文章
相似问题