0
私はポンドとドルの間で変換が可能でなければならない値段表のために何かを作成していますが、私はこれを基礎としています。スライディングメカニックが、スターリング」の両方の価格との間の変換、それの機能を生成するために複数回、私はそれが唯一のDIVの内容を切り替えるボタン
var shown = 'sterling';
function swap() {
if (shown === 'sterling') {
document.getElementById('dollars-1').style.display = "inline-block";
document.getElementById('dollars-2').style.display = "inline-block";
document.getElementById('dollars-3').style.display = "inline-block";
document.getElementById('sterling-1').style.display = "none";
document.getElementById('sterling-2').style.display = "none";
document.getElementById('sterling-3').style.display = "none";
shown = 'dollars';
} else {
document.getElementById('sterling-1').style.display = "inline-block";
document.getElementById('sterling-2').style.display = "inline-block";
document.getElementById('sterling-3').style.display = "inline-block";
document.getElementById('dollars-1').style.display = "none";
document.getElementById('dollars-2').style.display = "none";
document.getElementById('dollars-3').style.display = "none";
shown = 'sterling';
}
};body {
background-color: #707070;
}
.switch {
position: relative;
height: 26px;
width: 120px;
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}
.switch-label {
position: relative;
z-index: 2;
float: left;
width: 58px;
line-height: 26px;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
cursor: pointer;
}
.switch-label:active {
font-weight: bold;
}
.switch-label-off {
padding-left: 2px;
}
.switch-label-on {
padding-right: 2px;
}
/*
* Note: using adjacent or general sibling selectors combined with
* pseudo classes doesn't work in Safari 5.0 and Chrome 12.
* See this article for more info and a potential fix:
* http://css-tricks.com/webkit-sibling-bug/
*/
.switch-input {
display: none;
}
.switch-input:checked+.switch-label {
font-weight: bold;
color: rgba(0, 0, 0, 0.65);
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
}
.switch-input:checked+.switch-label-on~.switch-selection {
left: 60px;
/* Note: left: 50% doesn't transition in WebKit */
}
.switch-selection {
display: block;
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
width: 58px;
height: 22px;
background: #65bd63;
border-radius: 3px;
background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
background-image: -o-linear-gradient(top, #9dd993, #65bd63);
background-image: linear-gradient(to bottom, #9dd993, #65bd63);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}<button id="sterling-1">£100.00</button>
<button id="sterling-2">£100.00</button>
<button id="sterling-3">£100.00</button>
<button id="dollars-1" style="display:none">$131.00</button>
<button id="dollars-2" style="display:none">$131.00</button>
<button id="dollars-3" style="display:none">$131.00</button>
<br/>
<br/>
<div class="switch">
<input type="radio" class="switch-input" name="view" value="week" id="week" checked>
<label for="week" class="switch-label switch-label-off" id="swap" onclick="swap()">Sterling</label>
<input type="radio" class="switch-input" name="view" value="month" id="month">
<label for="month" class="switch-label switch-label-on" id="swap" onclick="swap()">Dollars</label>
<span class="switch-selection"></span>
</div>助けていただけたら幸いです！
ありがとうございます！ダウンボートは私のものではなかったので、誰がそれをしたのか分からない - これは完璧なトリックだ！私はあなたに両方正しい答えの刻みを与えることができたらいい – Aaron
助けて嬉しい！グローバル変数 'shown'を取り除き、代わりにラジオの' value'変数を使うようにコードを更新しました。 – Connum
ありがとうございました:) – Aaron