我在左侧 div 中有 6 个产品...当我单击 product-1 时，只有 product-descript-1（product-1 的详细信息）将显示在右侧 div 中，并且产品的其余详细信息被隐藏...如果我点击 product-2 然后只有 product-descript-2（第二个产品的详细信息）显示在右侧，并且 product-3 和 prodcut4 以及 product-5 和 product-6 也是同样的方式
//actually i have 40 products
//suggest simple code
//instead of using this script any other simple way
<script type="text/javascript">
$(document).ready(function()
{
$("#product-1").click(function(){
$("#product-descript1").show()
$("#product-descript2,#product-descript3,#product-descript4,#product-descript5,#product-descript6).hide()
});
}
</script> #product-descript2,#product-descript3,#product-descript4,#product-descript5,#product-descript6{
display:none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>products</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="css/xzoom.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- <script type="text/javascript" src="js/jquery.elevatezoom.js"></script> -->
<script type="text/javascript" src="js/xzoom.min.js"></script>
<script type="text/javascript" src="js/myscript.js"></script>
</head>
<body>
<!--left div-->
<div class="col-lg-8 col-md-8 text-center">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-1">
<div class="pic">
<img class="product-img" src="images/t-shirt-1.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-2">
<div class="pic">
<img class="product-img" src="images/t-shirt-2.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-3">
<div class="pic">
<img class="product-img" src="images/t-shirt-3.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-4">
<div class="pic">
<img class="product-img" src="images/t-shirt-4.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-5">
<div class="pic">
<img class="product-img" src="images/t-shirt-5.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-6">
<div class="pic">
<img class="product-img" src="images/t-shirt-6.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
</div><!--lg-8-->
<!--right-div-->
<div class="col-lg-4 col-md-4">
<div class="col-lg-12 col-md-12" id="product-descript1">
<div class="product-img">
<img src="images/bt-shirt-1.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
<div class="col-lg-12 col-md-12" id="product-descript2">
<div class="product-img">
<img src="images/bt-shirt-2.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
<div class="col-lg-12 col-md-12" id="product-descript3">
<div class="product-img">
<img src="images/bt-shirt-3.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
<div class="col-lg-12 col-md-12" id="product-descript4">
<div class="product-img">
<img src="images/bt-shirt-4.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
<div class="col-lg-12 col-md-12" id="product-descript5">
<div class="product-img">
<img src="images/bt-shirt-5.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
<div class="col-lg-12 col-md-12" id="product-descript6">
<div class="product-img">
<img src="images/bt-shirt-6.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
</div><!--lg-4-->
</body>
</html>这是一个如何使用 JavaScript 完成此操作的简单示例：
let i, products = document.getElementsByClassName('product'); // get all products
for (i = 0; i < products.length; i++) {
products[i].onclick = function() {
showInfo(this.id)
}; // add onclick Event to all products
}
function showInfo(id) {
let x, infos = document.getElementsByClassName('info'); // get all infos
for (x = 0; x < infos.length; x++) {
(infos[x].id === 'info-' + id) ? infos[x].className = 'info': infos[x].className = 'info hidden'; // Show info for clicked product only
}
}.flex {
display: flex;
width: 100%;
}
.products {
width: 140px;
}
.infos {
padding: 10px;
margin: 10px;
background: grey;
width: 100%;
}
.product {
background: grey;
color: #fff;
margin: 10px;
padding: 10px;
width: 100px;
}
.info {
width: 100%;
color: #fff;
}
.hidden {
display: none;
}<div class="flex">
<div class="products">
<div class="product" id="product1">
Product 1
</div>
<div class="product" id="product2">
Product 2
</div>
<div class="product" id="product3">
Product 3
</div>
<div class="product" id="product4">
Product 4
</div>
</div>
<div class="infos">
<div class="info" id="info-product1">
Info 1
</div>
<div class="info hidden" id="info-product2">
Info 2
</div>
<div class="info hidden" id="info-product3">
Info 3
</div>
<div class="info hidden" id="info-product4">
Info 4
</div>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句