點擊區域javascript中的問題

我是新來的JavaScript，我做了一些自定義按鈕與<div>和CSS樣式，鼠標懸停，鼠標和點擊事件是用Javascript控制的。這些事件工作得相當好，但點擊區域不起作用。而不是所有按鈕大小的工作，點擊區域是<div>頂部的一小部分。如何糾正點擊區域以使用所有按鈕？點擊區域javascript中的問題

這是我使用的HTML，CSS和JavaScript代碼。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Customize Button</title> 
<!--import stylesheet --> 
<link rel="stylesheet" type="text/css" href="botonesStyles.css"> 
</head> 
<body> 
<section class="services-wrap"> 

     <div class="service-button" id="service_account" > 
      <span id="serviceA-text" class="service-button-text">ACCOUNT 
       TO ACCOUNT</span> 
     </div> 

     <div class="service-button" id="service_credit"> 
      <span id="serviceB-text" class="service-button-text">CREDIT 
       CARD</span> 
     </div> 

     <div class="service-button" id="service_cash"> 
      <span id="serviceC-text" class="service-button-text">WORLD 
       CASH</span> 
     </div> 

     <div class="service-button" id="service_exchange"> 
      <span id="serviceC-text" class="service-button-text">EXCHANGE 
       UPDATES</span> 
     </div> 



     <div class="service-text-wrap"> 
      <div id="service-account-wrap" class="service-account-wrap"> 
       <span class="service-text"> Transfer money between accounts 
        in different currencies as one-time or recurrent transactions.</span> 
      </div> 


      <div id="service-credit-wrap" class="service-credit-wrap"> 
       <span class="service-text"> Send money to your foreign credit 
        cards. Or use your local credit card to send cash worldwide. </span> 
      </div> 


      <div id="service-world-wrap" class="service-world-wrap"> 
       <span class="service-text"> From your account or credit card 
        transfer money and collect it in cash at selected destination. </span> 
      </div> 


      <div id="service-exchange-wrap" class="service-exchange-wrap"> 
       <span class="service-text"> Receive notification via email on 
        the exchange rate that meets your criteria free of charge. </span> 
      </div> 

<script type="text/javascript"> 


     //text variables to set it true or false 
     var t1 = 0; 


     var x1 = document.getElementById("service-account-wrap"); 
     var x2 = document.getElementById("service-credit-wrap"); 
     var x3 = document.getElementById("service-world-wrap"); 
     var x4 = document.getElementById("service-exchange-wrap"); 


     /* Add Event Listener for all service buttons */ 

     document.getElementById("service_account").addEventListener("mouseover", showtextAccount); 
     document.getElementById("service_account").addEventListener("mouseout", hidetextAcount); 
     document.getElementById("service_account").addEventListener("click", clickAccount); 

     document.getElementById("service_credit").addEventListener("mouseover", showtextCredit); 
     document.getElementById("service_credit").addEventListener("mouseout", hidetextCredit); 
     document.getElementById("service_credit").addEventListener("click", clickCredit); 

     document.getElementById("service_cash").addEventListener("mouseover", showtextCash); 
     document.getElementById("service_cash").addEventListener("mouseout", hidetextCash); 
     document.getElementById("service_cash").addEventListener("click", clickCash); 

     document.getElementById("service_exchange").addEventListener("mouseover", showtextExchange); 
     document.getElementById("service_exchange").addEventListener("mouseout", hidetextExchange); 
     document.getElementById("service_exchange").addEventListener("click", clickExcahnge); 

     function showtextAccount() { 
      x1.style.display ="block"; 
      x2.style.display = "none"; 
      x3.style.display = "none"; 
      x4.style.display = "none"; 
      this.style.backgroundColor ="#7b3454"; 
     } 
     function showtextCredit() { 
      x1.style.display ="none"; 
      x2.style.display = "block"; 
      x3.style.display = "none"; 
      x4.style.display = "none"; 
      this.style.backgroundColor ="#7b3454";   
     } 
     function showtextCash() { 
      x1.style.display ="none"; 
      x2.style.display = "none"; 
      x3.style.display = "block"; 
      x4.style.display = "none"; 
      this.style.backgroundColor ="#7b3454";  
     } 
     function showtextExchange() { 
      x1.style.display ="none"; 
      x2.style.display = "none"; 
      x3.style.display = "none"; 
      x4.style.display = "block"; 
      this.style.backgroundColor ="#7b3454"; 

     } 

     function hidetextAcount() { 
      x1.style.display = "none"; 
      document.getElementById("service_account").style.backgroundColor ="#1f1e20"; 

     } 

     function hidetextCredit() { 

      x2.style.display = "none"; 
      document.getElementById("service_credit").style.backgroundColor ="#1f1e20"; 
     } 
     function hidetextCash() { 
      x3.style.display = "none"; 
      document.getElementById("service_cash").style.backgroundColor ="#1f1e20"; 
     } 
     function hidetextExchange() { 
      x4.style.display = "none"; 
      document.getElementById("service_exchange").style.backgroundColor ="#1f1e20"; 
     } 

     function clickAccount() { 
      t1 = 1; 
      document.getElementById("service_account").removeEventListener("mouseover", showtextAccount); 
      document.getElementById("service_account").removeEventListener("mouseout", hidetextAcount); 


      document.getElementById("service_credit").addEventListener("mouseover", showtextCredit); 
      document.getElementById("service_credit").addEventListener("mouseout", hidetextCredit); 


      document.getElementById("service_cash").addEventListener("mouseover", showtextCash); 
      document.getElementById("service_cash").addEventListener("mouseout", hidetextCash); 


      document.getElementById("service_exchange").addEventListener("mouseover", showtextExchange); 
      document.getElementById("service_exchange").addEventListener("mouseout", hidetextExchange); 


      x1.style.display ="block"; 
      x2.style.display = "none"; 
      x3.style.display = "none"; 
      x4.style.display = "none"; 
      document.getElementById("service_account").style.backgroundColor ="#f27a20"; 
      document.getElementById("service_credit").style.backgroundColor ="#1f1e20"; 
      document.getElementById("service_cash").style.backgroundColor ="#1f1e20"; 
      document.getElementById("service_exchange").style.backgroundColor ="#1f1e20"; 
     } 

     function clickCredit() { 
      t1 =2; 
      document.getElementById("service_account").addEventListener("mouseover", showtextAccount); 
      document.getElementById("service_account").addEventListener("mouseout", hidetextAcount); 


      document.getElementById("service_credit").removeEventListener("mouseover", showtextCredit); 
      document.getElementById("service_credit").removeEventListener("mouseout", hidetextCredit); 


      document.getElementById("service_cash").addEventListener("mouseover", showtextCash); 
      document.getElementById("service_cash").addEventListener("mouseout", hidetextCash); 


      document.getElementById("service_exchange").addEventListener("mouseover", showtextExchange); 
      document.getElementById("service_exchange").addEventListener("mouseout", hidetextExchange); 



      x1.style.display ="none"; 
      x2.style.display = "block"; 
      x3.style.display = "none"; 
      x4.style.display = "none"; 
      document.getElementById("service_account").style.backgroundColor ="#1f1e20"; 
      document.getElementById("service_credit").style.backgroundColor ="#f27a20"; 
      document.getElementById("service_cash").style.backgroundColor ="#1f1e20"; 
      document.getElementById("service_exchange").style.backgroundColor ="#1f1e20"; 
     } 

     function clickCash() { 
      t1 = 3; 
      document.getElementById("service_account").addEventListener("mouseover", showtextAccount); 
      document.getElementById("service_account").addEventListener("mouseout", hidetextAcount); 


      document.getElementById("service_credit").addEventListener("mouseover", showtextCredit); 
      document.getElementById("service_credit").addEventListener("mouseout", hidetextCredit); 


      document.getElementById("service_cash").removeEventListener("mouseover", showtextCash); 
      document.getElementById("service_cash").removeEventListener("mouseout", hidetextCash); 


      document.getElementById("service_exchange").addEventListener("mouseover", showtextExchange); 
      document.getElementById("service_exchange").addEventListener("mouseout", hidetextExchange); 

      x1.style.display ="none"; 
      x2.style.display = "none"; 
      x3.style.display = "block"; 
      x4.style.display = "none"; 
      document.getElementById("service_account").style.backgroundColor ="#1f1e20"; 
      document.getElementById("service_credit").style.backgroundColor ="#1f1e20"; 
      document.getElementById("service_cash").style.backgroundColor ="#f27a20"; 
      document.getElementById("service_exchange").style.backgroundColor ="#1f1e20"; 
     } 
     function clickExcahnge() { 
      t1 = 4; 
      document.getElementById("service_account").addEventListener("mouseover", showtextAccount); 
      document.getElementById("service_account").addEventListener("mouseout", hidetextAcount); 


      document.getElementById("service_credit").addEventListener("mouseover", showtextCredit); 
      document.getElementById("service_credit").addEventListener("mouseout", hidetextCredit); 


      document.getElementById("service_cash").addEventListener("mouseover", showtextCash); 
      document.getElementById("service_cash").addEventListener("mouseout", hidetextCash); 


      document.getElementById("service_exchange").removeEventListener("mouseover", showtextExchange); 
      document.getElementById("service_exchange").removeEventListener("mouseout", hidetextExchange); 

      x1.style.display ="none"; 
      x2.style.display = "none"; 
      x3.style.display = "none"; 
      x4.style.display = "block"; 
      document.getElementById("service_account").style.backgroundColor ="#1f1e20"; 
      document.getElementById("service_credit").style.backgroundColor ="#1f1e20"; 
      document.getElementById("service_cash").style.backgroundColor ="#1f1e20"; 
      document.getElementById("service_exchange").style.backgroundColor ="#f27a20"; 
     } 

     </script> 

     </div> 



    </section> 

</body> 
</html>

CSS代碼：

@media only screen and (min-device-width: 768px) { 
    html { 
     position: relative; 
     left: 15%; 
     margin: 10px; 
     padding: 0; 
     width: 1280px; 
    } 
    body { 
     display: block; 
     font-family: 'Open Sans', sans-serif; 
     text-align: center; 
     background-color: #cccccc; 
    } 

    /* ---------- SERVICES SECTION -----------*/ 
    .services-wrap { 
     display: inline-block; 
     position: absolute; 
     top: 170px; 
     left: 0; 
     width: 100%; 
     height: 60px; 
     margin: 0; 
     padding: 0; 
    } 
    .service-button { 
     float: left; 
     cursor: pointer; 
     background: #1f1e20; 
     width: 25%; 
     height: 35px; 
     margin: 0; 
     padding: 0; 

    } 



    .service-button-text { 
     position: relative; 
     top: 5px; 
     font-family: 'Open Sans', sans-serif; 
     font-weight: 300; 
     font-size: 14px; 
     color: #FFFFFF; 
     width: 50%; 
     height: 16px; 
     text-align: center; 
     margin: 0; 
    } 

    /*-------------- SERVICE TEXT ---------------------------*/ 
    .service-text-wrap { 
     width: 100%; 
     height: 90px; 
    } 
    .service-text { 
     font-family: 'Open Sans', sans-serif; 
     font-weight: 300; 
     font-size: 14px; 
     text-align: left; 
     color: #1f1e20; 
    } 
    .service-account-wrap { 
     display: none; 
     position: relative; 
     top: 10px; font-family : 'Open Sans', sans-serif; 
     font-weight: 300; 
     font-size: 14px; 
     text-align: left; 
     color: #1f1e20; 
     width: 90%; 
     height: 50px; 
     margin: 0 50px 0 50px; 
     padding: 0; 
     font-family: 'Open Sans', sans-serif; 
    } 
    .service-credit-wrap { 
     display: none; 
     position: relative; top : 10px; 
     font-family: 'Open Sans', sans-serif; 
     font-weight: 300; 
     font-size: 14px; 
     text-align: left; 
     color: #1f1e20; 
     width: 90%; 
     height: 50px; 
     margin: 0 50px 0 50px; 
     padding: 0; 
     top: 10px; 
    } 
    .service-world-wrap { 
     display: none; 
     position: relative; top : 10px; 
     font-family: 'Open Sans', sans-serif; 
     font-weight: 300; 
     font-size: 14px; 
     text-align: left; 
     color: #1f1e20; 
     width: 90%; 
     height: 50px; 
     margin: 0 50px 0 50px; 
     padding: 0; 
     top: 10px; 
    } 
    .service-exchange-wrap { 
     display: none; 
     position: relative; top : 10px; 
     font-family: 'Open Sans', sans-serif; 
     font-weight: 300; 
     font-size: 14px; 
     text-align: left; 
     color: #1f1e20; 
     width: 90%; 
     height: 50px; 
     margin: 0 50px 0 50px; 
     padding: 0; 
     top: 10px; 
    } 

}

來源

2016-09-23 user3649377

你能否清楚你想要的是什麼，點擊區域很混亂 – crystalthinker

https://plnkr.co/edit/yN7HjA2vpudNdzwfAPcR?p=preview這是一段代碼。你能解釋一下你的問題點擊 – crystalthinker

我已經通過你的代碼。我發現了一些設計問題。您的鼠標懸停，鼠標懸停和點擊事件正在使用「服務按鈕」。這個類有一個風格「float：left;」。您的下一個div「service-text-wrap」即將通過「服務按鈕」。你只需要添加

<div style="clear:both;">&nbsp;</div>

就在「service-text-wrap」div之前。希望這會幫助你。

來源

2016-09-23 09:54:42 Kallol

謝謝我要去試試這個 – user3649377

Kallol非常感謝你，它完美的工作！ – user3649377

點擊區域javascript中的問題

回答

相關問題