display none 해도 보여요

2 글 보임 - 1 에서 2 까지 (총 2 중에서)

글쓴이

글

2022년 12월 7일 17:07 #57185

참가자

<!doctype html>
<html lang="en">
  <head>
  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
      
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> 
      
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

      
    
  </head>

    
  <body>
      
<div class="container mt-3" >
    <div class="card p-3">
        <span class='car-title'>상품명 </span>
        <span class='car-price'> 가격 </span>
         
    </div>
</div>    
      
<form class="container my-5 form-group" >
    <p>상품선택</p>
    <select class="form-select mt-2">
      <option>모자</option>
      <option>셔츠</option>
        
    </select>
      <select class="form-select mt-2 form-hide " >
      <option>95</option>
      <option>100</option>
    </select>
    
  
    
</form>
        
<script>
    
//    
//    $('#hat').on('click',function(){
//           $('.hat2').addClass('.show-modal');
//        });    
    
    
var car= ['소나타',50000,'white'];
var car2= {name : '소나타', price : [50000,3000,4000] }   
//오브젝트 자료형 장점: 이름 붙일수있음. 자료이름부분을 key 내용을 value 라고 명칭   
//car2.price = 6000
//console.log(car2.price)
//
//document.querySelector('.car-title').innerHTML=car2.name;
//document.querySelector('.car-price').innerHTML=car2.price[0];

</script>

<style>
  ul.list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #ccc;
  }
  ul.list::after {
    content: '';
    display: block;
    clear: both;
  }
  .tab-button {
    display: block;
    padding: 10px 20px 10px 20px;
    float: left;
    margin-right: -1px;
    margin-bottom: -1px;
    color: grey;
    text-decoration: none;
    cursor: pointer;
  }
  .orange {
    border-top: 2px solid orange;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid white;
    border-left: 1px solid #ccc;
    color: black;
    margin-top: -2px;
  }
  .tab-content {
    display: none;
    padding: 10px;
  }
  .show {
    display: block;
  }
   
</style>

<div class="container mt-5">
    
   
  <ul class="list">
    <li class="tab-button" data-id="0">Products
    <li class="tab-button orange"  data-id="1">Information
    <li class="tab-button"  data-id="2">Shipping
  
  <div class="tab-content">
    <p>상품설명입니다. Product</p>
  </div>
  <div class="tab-content show">
    <p>스펙설명입니다. Information</p>
  </div>
  <div class="tab-content">
    <p>배송정보입니다. Shipping</p>
  </div>
</div> 
   
<script src="tab.js"></script>
      
    
      
  
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  </body>
</html>

display none 해도 보여요 

      <select class="form-select mt-2 form-hide " style="display: none" > 이렇게 해주면 안보이구요 ,,,
뭐가 문제일까요 ㅜㅜ

2022년 12월 7일 20:24 #57235

codingapple

키 마스터

맞는 클래스명에 display none 줬나 확인합시다

글쓴이

글

2 글 보임 - 1 에서 2 까지 (총 2 중에서)

답변은 로그인 후 가능합니다.

로그인

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png