2016-02-27 112 views
1
  1. 我想在同一時間選擇按鈕(顏色和大小),我希望它像這樣專注>>enter image description here如何保持焦點按鈕併發送按鈕焦點在窗體上?

  2. 我想在表單上發送數據表單焦點按鈕。

\t function show(elementId) { 
 
\t \t document.getElementById("id1").style.display="none"; 
 
\t \t document.getElementById("id2").style.display="none"; 
 
\t \t document.getElementById("id3").style.display="none"; 
 
\t \t document.getElementById(elementId).style.display="block"; 
 
\t }
.btn:focus{ 
 
    border-radius: 20px; 
 
    color:#000; 
 
} 
 
.btn2:focus{ 
 
    border-radius: 10px; 
 
    color:#D97476; 
 
}
<form name="selectItem" method="POST" action="keepdata.php"> 
 
    
 
    <div class="select-color"> 
 

 
    <p>Select color</p> 
 
    <button type="button" name="scolor" class="btn btn-default black-s7" onclick="show('id1');">Black</button> 
 
    <button type="button" name="scolor" class="btn btn-default silver-s7" onclick="show('id2');">Green</button> 
 
    <button type="button" name="scolor" class="btn btn-default gold-s7" onclick="show('id3');">Red</button> 
 

 

 
    </div> 
 

 
    <div class="select-option-s7"> 
 
    <p>Select Size</p> 
 
    <button type="button" class="btn2 btn-color black" title="black">S</button> 
 
    <button type="button" class="btn2 btn-color silver" title="silver">M</button> 
 
    <button type="button" class="btn2 btn-color silver" title="silver">L</button> 
 
    </div> 
 
    
 
    
 
    <button type="submit">submit</button> 
 

 
</form>

謝謝

+0

您可以使用輸入框,而不是按鈕和使用自動對焦功能,性能。 –

回答

1

爲什麼你不使用輸入類型= 「無線電」?

使用另一個類風格和jQuery添加類上點擊按鈕。

$('.select-color button').on('click', function(){ 
 
    $('.select-color button.selected').removeClass('selected'); 
 
    $(this).addClass('selected'); 
 
}); 
 

 
$('.select-option-s7 button').on('click', function(){ 
 
    $('.select-option-s7 button.selected').removeClass('selected'); 
 
    $(this).addClass('selected'); 
 
});
.selected{ 
 
    border-radius: 10px; 
 
    color:#D97476; 
 
} 
 

 
.btn:focus{ 
 
    outline: none; 
 
} 
 

 
.btn2:focus{ 
 
    outline: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="selectItem" method="POST" action="keepdata.php"> 
 
    
 
    <div class="select-color"> 
 

 
    <p>Select color</p> 
 
    <button type="button" name="scolor" class="btn btn-default black-s7" onclick="show('id1');">Black</button> 
 
    <button type="button" name="scolor" class="btn btn-default silver-s7" onclick="show('id2');">Green</button> 
 
    <button type="button" name="scolor" class="btn btn-default gold-s7" onclick="show('id3');">Red</button> 
 

 

 
    </div> 
 

 
    <div class="select-option-s7"> 
 
    <p>Select Size</p> 
 
    <button type="button" class="btn2 btn-color black" title="black">S</button> 
 
    <button type="button" class="btn2 btn-color silver" title="silver">M</button> 
 
    <button type="button" class="btn2 btn-color silver" title="silver">L</button> 
 
    </div> 
 
    
 
    
 
    <button type="submit">submit</button> 
 

 
</form>