0
我必須創建一個包含4個單選按鈕和1個「繼續」以特效按鈕模板如下圖所示 
單選按鈕確認，同時單擊「繼續」按鈕的Javascript
我試圖加入一段JavaScript代碼，而點擊「繼續」：
- 如果任何單選按鈕，然後會彈出，你需要選擇一個布頓警報
- 如果選擇單選1，它會打開網頁choice1.php，如果無線電2被選中然後它會打開頁面choose2.php等等...
我下面的一些教程和測試它基本的例子，它爲我工作，但通常我看到
<form onsubmit="return validateSubmit();" action="#">
和
<input type="submit" value="Submit">
當我改變我的按鈕提交I型失去了我用CSS添加的效果。
這裏是我的代碼片段
@import url('https://fonts.googleapis.com/css?family=Lato');
.container{
font-family: 'Lato', sans-serif;
display: block;
position: relative;
margin: 40px auto;
height: auto;
width: 500px;
padding: 20px;
}
h1 {
\t color: #000000;
}
.container ul{
list-style: none;
margin: 0;
padding: 0;
\t overflow: auto;
}
ul li{
color: #696969;
display: block;
position: relative;
float: left;
width: 100%;
height: 100px;
\t border-bottom: 1px solid #333;
}
ul li input[type=radio]{
position: absolute;
visibility: hidden;
}
ul li label{
display: block;
position: relative;
font-weight: 300;
font-size: 1.35em;
padding: 25px 25px 25px 80px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
ul li:hover label{
\t color: #1E90FF;
}
ul li .check{
display: block;
position: absolute;
border: 5px solid #696969;
border-radius: 100%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;
\t z-index: 5;
\t transition: border .25s linear;
\t -webkit-transition: border .25s linear;
}
ul li:hover .check {
border: 5px solid #1E90FF;
}
ul li .check::before {
display: block;
position: absolute;
\t content: '';
border-radius: 100%;
height: 15px;
width: 15px;
top: 5px;
\t left: 5px;
margin: auto;
\t transition: background 0.25s linear;
\t -webkit-transition: background 0.25s linear;
}
input[type=radio]:checked ~ .check {
border: 5px solid #1E90FF;
}
input[type=radio]:checked ~ .check::before{
background: #1E90FF;
}
input[type=radio]:checked ~ label{
color: #1E90FF;
}
@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:700";
.flex {
\t font-family: "Source Sans Pro", sans-serif;
-webkit-font-smoothing: antialiased;
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
}
a.bttn {
color: #1E90FF;
text-decoration: none;
-webkit-transition: 0.3s all ease;
transition: 0.3s ease all;
}
a.bttn:hover {
color: #FFF;
}
a.bttn:focus {
color: #FFF;
}
.bttn {
font-size: 18px;
letter-spacing: 2px;
text-transform: uppercase;
display: inline-block;
text-align: center;
width: 270px;
font-weight: bold;
padding: 14px 0px;
border: 3px solid #1E90FF;
border-radius: 2px;
position: relative;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
}
.bttn:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content: '';
background-color: #1E90FF;
z-index: -2;
}
.bttn:hover:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
.bttn:focus:before {
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
a.bttn{
top: -110px;
}
<div class="container">
\t
\t <h1 lign="center">Select the Type :</h1>
\t <br/>
<ul>
<li>
<input type="radio" id="f-option" name="selector">
<label for="f-option">Shipment</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="s-option" name="selector">
<label for="s-option">Canceled</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="t-option" name="selector">
<label for="t-option">Ordered</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="u-option" name="selector">
<label for="u-option">Other</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
</div>
<div class="flex">
<a class="bttn" >Continue</a>
</div>
任何人都可以幫我請如何保持「繼續」按鈕相同的設計，並加入到它的JavaScript部分。
非常感謝。
你能發表您的javascript函數validateSubmit（） – Shard
@Shard我試圖這樣http://jsfiddle.net/FhgQS/簡單的例子，我不知道如何改變輸入提交我的繼續 JuniorDev
@JuniorDev你可以使用'a.bttn'的css作爲'input [type =「submit」]' – Pratyush