如何保持焦点按钮并发送按钮焦点在窗体上？

Question

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>

谢谢

Answer 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>