文章/答案/技术大牛

发布

社区首页 >问答首页 >如何创建用户单击左侧产品的详细信息将显示在右侧。

问如何创建用户单击左侧产品的详细信息将显示在右侧。
EN

Stack Overflow用户

提问于 2018-09-26 10:36:48

回答 3查看 445关注 0票数 0

我有6种产品在左侧div...when，我点击产品-1只产品-描述-1(详细的产品-1)将显示在右侧的div和其余的产品细节是隐藏的。如果我单击产品-2，则右侧只显示产品描述-2(第二产品的详细信息)，而产品-3、prodcut4、产品-5和产品-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

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-09-26 11:11:03

下面是一个简单的示例，说明如何使用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>

票数 1

Stack Overflow用户

发布于 2018-09-26 11:03:12

您需要使用类选择器，这样就可以针对所有产品，例如，您可以在每个产品div中使用add class="product" (与product级别相同)，然后一旦用户单击该类的任何项，就会隐藏该类的所有项，并只显示当前单击的项。

以下是一个简单的完整工作解决方案：

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<div class="product" id="product_1">
    <b>product1</b>
    <p class="details">details</p>
</div>
<div class="product" id="product_2">
    <b>product2</b>
    <p class="details">details</p>
</div>
<div class="product" id="product_3">
    <b>product3</b>
    <p class="details">details</p>
</div>

<script>
    $(function(){
        $('.product').on('click',function(e){
            $('.details').hide();
            $(this).find('.details').show();
        });
    });

</script>

试着理解这个解决方案，如果有什么不清楚的地方让我知道，否则如果你觉得有用的话，别忘了接受这个答案。

票数 1

Stack Overflow用户

发布于 2018-09-26 11:22:03

简单的工作解决方案可以将文件加载到<div>中。

见下面的片段。这将从您的目录中调用要设置为<div class="Product"></div>的外部文件。我已经通过SSI在那里设置了filepath，这样就会有内容，然后加载(可能是内容告诉用户在菜单中选择一个产品)。

菜单可以是任何东西-图像，文本等等-我刚才在这个例子中使用了文本。

为了调整您的需要，您需要编辑以下内容：

Product1：将其更改为菜单中使用的唯一ID。
DivToContent：将其更改为您想要内容的<div>的类名。
PathTo/File1.html：将其更改为文件的路径。
charset=ISO-8859-1：将此更改为您使用的字符集

我没有提供任何CSS，因为您可以样式所有的类，如您所愿。所有的ID标签只适用于脚本。如果您想要的话，可以提供一个整洁的转换。

如果产品超过六种，只需在下面复制/粘贴并编辑数字即可。

  $('#Product1').click(function(e) {
    $('.DivToContent').load('PathTo/File1.html');
    e.preventDefault();
  });

$(function() {
  $('#Product1').click(function(e) {
    $('.DivToContent').load('PathTo/File1.html');
    e.preventDefault();
  });

  $('#Product2').click(function(e) {
    $('.DivToContent').load('PathTo/File2.html');
    e.preventDefault();
  });

  $('#Product3').click(function(e) {
    $('.DivToContent').load('PathTo/File3.html');
    e.preventDefault();
  });

  $('#Product4').click(function(e) {
    $('.DivToContent').load('PathTo/File4.html');
    e.preventDefault();
  });

  $('#Product5').click(function(e) {
    $('.DivToContent').load('PathTo/File5.html');
    e.preventDefault();
  });
  $('#Product6').click(function(e) {
    $('.DivToContent').load('PathTo/File6.html');
    e.preventDefault();
  });
});

$.ajaxSetup({
  'beforeSend': function(xhr) {
    xhr.overrideMimeType('text/html; charset=ISO-8859-1');
  }
});

// Handler to wrap a SPAN around what is selected
$(document).on('click', '.DivMenu a', function(e) {
  $('.DivMenu .productselected a').unwrap(  )
  $(this).wrap("<span class='productselected'></span>");
  
});

<div class="DivMenu">
<p>
<a id="Product1" href="javascript:;">Product1</a> &#124; 
<a id="Product2" href="javascript:;">Product2</a> &#124; 
<a id="Product3" href="javascript:;">Product3</a> &#124; 
<a id="Product4" href="javascript:;">Product4</a> &#124; 
<a id="Product5" href="javascript:;">Product5</a> &#124; 
<a id="Product6" href="javascript:;">Product6</a>
</p>
</div>

<div class="DivToContent"><!--#include virtual="PathTo/File0.html"--></div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52515750

复制

相似问题

问如何创建用户单击左侧产品的详细信息将显示在右侧。
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建用户单击左侧产品的详细信息将显示在右侧。EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建用户单击左侧产品的详细信息将显示在右侧。
EN