I am trying to design a file hosting website template, the problem is i have redesigned the radio buttons to div elements to have custom image instead of default circles with javascript,
我正在尝试设计一个托管网站模板的文件,问题是我已经重新设计了单选按钮来div元素,而不是使用javascript的默认圆圈,
This is image 1 when default page loads
这是加载默认页面时的图像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>
my 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>
if i click on any other tab it works fine and that tab gets selected
如果我点击任何其他选项卡它工作正常,该选项卡被选中
Image 2 when clicked on URL Upload
单击URL上载时的图像2
but the script store the cookie of last selected tab, so next time a person visits the site automatically that tab is shown, so as i have manually hard coded the css in the div it breaks the design, like in image below i selected "URL Upload" and than reloaded the page
但是脚本存储了最后选择的选项卡的cookie,所以下次一个人自动访问该站点时会显示该选项卡,因此我手动硬编码div中的css会破坏设计,如下图所示我选择了“URL”上传“然后重新加载页面
Image 3 when exited the browser and revisited the site
图3退出浏览器并重新访问该网站
in selector it is showing Form Upload but instead URL Upload tab is open.
在选择器中,它显示表单上载,而不是URL上载选项卡已打开。
Please help me solve the problem so that if URL Upload is open it show the URL Upload selected in tab above.
请帮助我解决问题,以便在URL上传打开时显示上面选项卡中选择的URL上传。
I cant use any framework due to limitations, i can only use javascript but not framework. Please help me solving as i have very less knowledge of javascript.
由于局限性,我无法使用任何框架,我只能使用javascript但不能使用框架。请帮助我解决,因为我对javascript知之甚少。
Thank You very much.
非常感谢你。
Regards,
Shishant Todi
2 个解决方案
#1
You need to preserve the state of the radio buttons after the browser closes. Cookies are the only way I can think of doing this, and you can manipulate cookies using javascript. (googling "javascript cookies" yields a lot of good tutorials for this.)
浏览器关闭后,您需要保留单选按钮的状态。 Cookie是我能想到的唯一方法,您可以使用javascript操作Cookie。 (谷歌搜索“javascript cookies”为此提供了很多很好的教程。)
#2
IMHO, this is just a really bad idea - for starters your page is broken for anyone without JS, for another now you have to reimplement everything which is standardised, browser-safe and pre-written in the form of radio buttons, and you're breaking a well-understood user convention.
恕我直言,这只是一个非常糟糕的主意 - 对于初学者来说,你的页面对于没有JS的人来说是破碎的,另一个现在你必须重新实现标准化,浏览器安全和预先写入单选按钮形式的所有内容,而你'重新打破一个易于理解的用户约定。
I strongly recommend you reconsider radio buttons. You shouldn't be promoting form over function.
我强烈建议您重新考虑单选按钮。你不应该在功能上推广表单。
#1
You need to preserve the state of the radio buttons after the browser closes. Cookies are the only way I can think of doing this, and you can manipulate cookies using javascript. (googling "javascript cookies" yields a lot of good tutorials for this.)
浏览器关闭后,您需要保留单选按钮的状态。 Cookie是我能想到的唯一方法,您可以使用javascript操作Cookie。 (谷歌搜索“javascript cookies”为此提供了很多很好的教程。)
#2
IMHO, this is just a really bad idea - for starters your page is broken for anyone without JS, for another now you have to reimplement everything which is standardised, browser-safe and pre-written in the form of radio buttons, and you're breaking a well-understood user convention.
恕我直言,这只是一个非常糟糕的主意 - 对于初学者来说,你的页面对于没有JS的人来说是破碎的,另一个现在你必须重新实现标准化,浏览器安全和预先写入单选按钮形式的所有内容,而你'重新打破一个易于理解的用户约定。
I strongly recommend you reconsider radio buttons. You shouldn't be promoting form over function.
我强烈建议您重新考虑单选按钮。你不应该在功能上推广表单。