国产沈阳熟女视频|骚视频97网站一区日本在线视频|久1社区在线视频|综合久久国外自产拍无码精品视频|亚洲欧美Tv先锋|综合五月天网址制服丝袜在线露脸|1024欧美手机视频我不卡|日本二区欧美亚洲国产|丁香五月婷婷五月|综合 另类 一区

如圖所示，點(diǎn)擊下面的產(chǎn)品，上面顯示產(chǎn)品的價格。

點(diǎn)擊圖片放大鏡，也可以放大圖片。

以下是代碼部分：

 
 <link rel="stylesheet" href="{hmcms:sitetplpath}/css/lightbox.css?v=2141234"> 
<script type=text/javascript src="{hmcms:sitetplpath}/js/jquery.colorbox-min.js"></script>   
        	<div class="col-12 col-lg-5 mb-3 pr-3 product" data-id="{content:id}">
            	<h2 class="mb-5 fs-sm-28 fs-20">{content:title}</h2> 
              <div class="mb-5"  id="Title-Price"></div>
              <nav>
                  <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <button class="mode-list active" id="nav-home-tab" data-toggle="tab" data-target="#mytab1" type="button" role="tab" aria-controls="nav-home" aria-selected="true">模塊</button>
                    <button class="mode-list" id="nav-profile-tab" data-toggle="tab" data-target="#mytab2" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">組合</button>
                  </div>
              </nav>
              <div class="tab-content" id="nav-tabContent">
                  <div class="tab-pane fade show active" id="mytab1" role="tabpanel" aria-labelledby="nav-home-tab">
                     <div class="row">
                        {hmcms:pics num=30 id={content:id}  field=ext_mode}  
                          <div class="col-md-4 mt-4">
                             <div class="product-box">
                               <div class="ico"><img src=" [pics:src]" class="w-100" alt=""><i class="bi bi-search openbig"></i></div>
                               <div class="title text-center fs-12">
                                [pics:description fun=myraw]
                               </div>
                               <div class="price">[pics:title]</div>
                               <a href="[pics:src]" data-lightbox="roadtrip"  class="openbig"><i class="bi bi-zoom-in"></i></a>
                             </div>
                          </div>
                        {/hmcms:pics}
                     </div>
                  </div>
                  <div class="tab-pane fade" id="mytab2" role="tabpanel" aria-labelledby="nav-profile-tab">
                     <div class="row">
                     {hmcms:pics num=30 id={content:id}  field=ext_zuhe}  
                          <div class="col-md-4  mt-4">
                             <div class="product-box">
                               <div class="ico"><img src="[pics:src]" class="w-100" alt=""></div>
                               <div class="title text-center fs-12">
                                [pics:description fun=myraw]
                               </div>
                               <div class="price">[pics:title]</div>
                               <a href="[pics:src]" data-lightbox="roadtrip"  class="openbig"><i class="bi bi-zoom-in"></i></a>
                             </div>
                          </div>
                        {/hmcms:pics}
                      </div>  
                  </div>
              </div>
            </div>



      </div>
      
  <style>

.mode-list{
   padding:15px 20px;
   margin-right: 10px;
   outline: none;
   border:1px solid #000;
   background: #fff;
}
.nav-tabs .active{
   background: #000;
   color:#fff;
}

.tab-pane{
   height:auto;
   max-height: 540px;
   overflow-y: scroll;
}

/* 隱藏 Webkit 內(nèi)核瀏覽器（Chrome、Edge、Safari）的滾動條 */
.tab-pane::-webkit-scrollbar {
  display: none;
}

/* 隱藏 Firefox 的滾動條 */
.tab-pane {
  scrollbar-width: none;   /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.product-box{
   padding:10px;
   position: relative;
   border:1px solid #eee;
}  
.product-box .ico{
   padding:10px;
}
.product-box .openbig{
   position: absolute;
   right:5px;
   top:5px;
   z-index: 5;
   font-size: 20px;
}

.ico-small {
  width: 100px;
  height: auto;
  margin-right: 8px;
  border:1px solid #000;
}
.out-border {
  border: 2px solid #000;
}
 .product-box .price {
  display: none;  
}
  </style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const products = document.querySelectorAll(".product-box");
  const titlePriceDiv = document.getElementById("Title-Price");

  products.forEach(function (box) {
    box.addEventListener("click", function () {
      // 移除所有 .out-border
      products.forEach(p => p.classList.remove("out-border"));

      // 當(dāng)前點(diǎn)擊的添加 .out-border
      box.classList.add("out-border");

      // 獲取 description
      const description = box.querySelector(".title").innerHTML.trim();
      // 獲取圖片
      const imgSrc = box.querySelector("img").getAttribute("src");
      // 獲取價格
      const price = box.querySelector(".price").innerHTML.trim();

      // 更新 Title-Price 內(nèi)容
      titlePriceDiv.innerHTML = `
        <div class="d-flex align-items-center mb-2">
          <a href="${imgSrc}" data-lightbox="roadtrip"> <img src="${imgSrc}" class="ico-small mr-2"></a>
          <span>${description}</span>         
        </div>
        <div class="fs-20 font-weight-bold text-danger">￥ ${price}</div>
      `;
    });
  });
});
</script>

后臺部分添加兩個字段：

然后上傳圖片后，把價格寫在標(biāo)題里面就可以了。