Question

我想做一个电子商务网站。在产品页面中，我们具有产品图像的列表，并且在产品图像上的悬停链接上，我们需要显示不同产品的不同描述。在这里，我附加一些代码。这适用于一种或两种产品。我需要申请许多产品。请帮助我

<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>

Answer 1

尽管可能，但是您可以创建所需的内容而无需使用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>

Answer 2

喜欢吗？

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>

如何根据产品点击次数在特定div相同页面上显示不同产品的产品描述？

2 个答案: