虽然说是原创，不过也是在网上搜的找啊的修改啊的得到的，也就在这里放出来和大家分享下。
第一个就是，针对不同的单选框按钮，链接不同的界面：
<script type="text/javascript">
function check() {
var radio = document.getElementsByTagName("input");
var a = document.getElementById("link");
if (radio[0].checked == false && radio[1].checked == false) {
a.href = "#";
}
else if (radio[0].checked==true)
{
a.href = "页面1.html";
}
else if (radio[1].checked==true)
{
<span style="white-space:pre"> </span>a.href = "页面2.html";
}
}
</script>
<input type="radio" name="radio" id="radio" value="radio" />页面1 <input type="radio" name="radio" id="radio2" value="radio" />页面2
<a id="link" onclick="check()"><input id="Reset1" type="reset" value="进入" /> </a>
就是使用到了jsp的check事件。想进入哪个页面1or页面2就可以简单的实现。
再有个今天获得的是当鼠标放到标签上面时，在同一个页面显示消息
div.contentfirst {
clear: left;
background-color: #6E6E6E;
color: white;
width: 300px;
height: 100px;
padding: 10px;
display: none;
}
div.contentin {
display: block;
}
</style>
<script type="text/javascript">
function showdiv(s){
if(s=="1"){
document.getElementById("content1").className="contentin contentfirst";//显示标题1的内容 下面代码类似不在添加注释
document.getElementById("content2").className="contentfirst";//隐藏标题2的内容 下面代码类似不在添加注释
document.getElementById("content3").className="contentfirst";//隐藏标题3的内容 下面代码类似不在添加注释
document.getElementById("li2").className=null;//使标题2与正文内容相离 下面代码类似 不在添加注释
document.getElementById("li1").className="";//使标题一与正文内容相连接 下面代码类似 不在添加注释
document.getElementById("li3").className=null;//使标题3与正文内容相离 下面代码类似 不在添加注释
}else if(s=="2"){
document.getElementById("content1").className="contentfirst";
document.getElementById("content2").className="contentin contentfirst";
document.getElementById("content3").className="contentfirst";
document.getElementById("li1").className=null;
document.getElementById("li2").className="";
document.getElementById("li3").className=null;
}else{
document.getElementById("content1").className="contentfirst";
document.getElementById("content3").className="contentin contentfirst";
document.getElementById("content2").className="contentfirst";
document.getElementById("li1").className=null
document.getElementById("li3").className="";
document.getElementById("li2").className=null
}
}
</script>
</head>
<body>
<ul>
<li id="li1" > <a href="#" onMouseOver="showdiv('1')"> 01 </a></li>
<li id="li2"> <a href="#" onMouseOver="showdiv('2')"> 02 </a></li>
<li id="li3"> <a href="#" onMouseOver="showdiv('3')"> 03 </a></li>
</ul>
<div style="position:absolute;left:540px;top:158px;">
<div class="contentfirst" id="content1">我是第一个内容</div>
<div class="contentfirst" id="content2">我是第二个内容</div>
<div class="contentfirst" id="content3">我是第三个内容</div>
</div>
</body>
</html>
这个确实是在网上找的，拿这里给看看。原代码主人说用jquery写代码能少点。学习之路漫漫长啊。
时间： 2024-08-14 17:36:25