在我的設計中需要幫助html / css / javascript

Question

我正在嘗試設計一個文件托管網站模板，問題是我已經重新設計了單選按鈕以使div元素具有自定義圖像，而不是使用javascript的默認圓圈，

當默認頁面加載時，這是圖像1

<script type="text/javascript">
<!--
//script to change background-color of the selected
//button and put the appropriate value in an input object
function btnClick(btnNum){
for (i=1;i<=4;i++){
tempBtnVal=document.getElementById('btnVal')
tempBtn=document.getElementById('btn'+i)
tempBtn.style.backgroundPosition=(i==btnNum?'0 -163px':'0 -30px')
tempBtn.style.color=(i==btnNum?'#333':'#6a7072')
}
tempBtnVal.value=btnNum
}
//-->
</script>

我的HTML

<div id="btn1" name="btn1" class="buttonDiv" value='1' onclick="btnClick('1')" style="background: url(images/inSprite.png) no-repeat scroll 0 -163px; color:#333;"><div id="btnTxt">local</div></div>

<div id="btn2" name="btn2" class="buttonDiv" value='2' onclick="btnClick('2')"><div class="btnTxt">remote</div></div>

如果我單擊任何其他選項卡，它將正常工作，並且該選項卡被選中

單擊URL Upload時的圖像2

但是腳本存儲了最后選擇的選項卡的cookie，因此下次有人自動訪問該網站時，該選項卡就會顯示，因此我在div中手動對css進行了硬編碼，這破壞了設計，就像下面的圖片中我選擇了“ URL”上傳”，然后重新加載頁面

圖片3退出瀏覽器並重新訪問該網站

在選擇器中，它顯示“表單上載”，但“ URL上載”選項卡處於打開狀態。

請幫助我解決問題，以便如果URL上載處於打開狀態，則顯示在上面選項卡中選擇的URL上載。

由於限制，我不能使用任何框架，我只能使用javascript而不能使用框架。 請幫助我解決，因為我對javascript的了解很少。

非常感謝你。

問候，

Shishant Todi

Answer 1

恕我直言，這真是個糟糕的主意-對於初學者，您的頁面對於沒有JS的任何人來說都是殘破的；對於另一個，現在您必須重新實現標准化，瀏覽器安全且以單選按鈕形式預先編寫的所有內容，並且重新打破了一個易於理解的用戶慣例。

我強烈建議您重新考慮單選按鈕。 您不應該提倡形式勝過功能。

Answer 2

瀏覽器關閉后，您需要保留單選按鈕的狀態。 Cookies是我想到的唯一方法，您可以使用JavaScript來操作Cookies。 （搜索“ javascript cookie”會為此提供很多很好的教程。）