伪select和真select地址跳转

仿select选择样式的二级菜单,鼠标经过时显示二级菜单的内容,点击之后可以正常跳转,更加的符合seo优化需要。同时还会给出平时用到的几种使用select跳转的代码

HTML代码

<span class="hot_myarts lh18" onmouseover="document.getElementById('HotArticle').style.display='';" onmouseout="document.getElementById('HotArticle').style.display='none';">
 <span class="myart_n1">
 <a href="http://http://caibaojian.com/frontend-skills.html">前端开发工程师掌握技能</a>
 <em></em>
 </span>
 <span id="HotArticle" class="myart_n2" style="display: none;">
 <span><a href="http://http://caibaojian.com/frontend-skills.html">前端开发工程师掌握技能</a><br /></span>
 <span><a href="http://http://caibaojian.com/frontend-skills.html">前端开发工程师掌握技能</a><br /></span>
 <span><a href="http://http://caibaojian.com/frontend-skills.html">前端开发工程师掌握技能</a><br /></span>
 <span><a href="http://http://caibaojian.com/frontend-skills.html">前端开发工程师掌握技能</a><br /></span>
 <span><a href="http://http://caibaojian.com/frontend-skills.html">前端开发工程师掌握技能</a><br /></span>
 </span>
 </span>

CSS代码

.hot_myarts{position: relative; float: left; width:180px; height: 18px; background: #fff; border: 1px solid #7F9EBD; padding-left: 3px;}
.myart_n1{line-height: 18px;}
.myart_n1 a{float: left;}
.myart_n1 em{float: right; width: 17px; height: 18px; display: inline; cursor:pointer; background:url(images/art_l006.gif) no-repeat center center;}
.myart_n2{position: absolute; left: -1px; top:18px; border: 1px solid #7F9EBD; padding-left: 3px; background: #fff; width: 180px;}

演示地址

在上面的演示中,可以看到我给出的其他几个真的select点击之后会跳转

例子一:点击后在当前窗口或者新窗口打开

使用JavaScript点击后新窗口跳转:
<select name="pageselect" onchange="window.open(options[selectedIndex].value)" >
<OPTION value="http://www.baidu.com">百度</OPTION>
<OPTION value="http://www.163.com">网易</OPTION>
</select>
<br/>
使用JavaScript点击后当前窗口跳转:
<select name="pageselect" onchange="window.location.href=options[selectedIndex].value" >
<OPTION value="http://www.baidu.com">百度</OPTION>
<OPTION value="http://www.163.com">网易</OPTION>
</select>

例子二:在外面定义一个函数,里面再引入动作跳转

<script type="text/javascript">
 function setsubmit()
 {
 if(mylink.value == 0)
 window.location='http://caibaojian.com';
 if(mylink.value == 1)
 window.location='http://www.163.com';
 if(mylink.value == 2)
 window.location='http://www.sina.com';
 }
 </script>
 <select name="mylink" id="mylink">
 <OPTION value="0">百度</OPTION>
 <OPTION value="1">网易</OPTION>
 <OPTION value="2">新浪</OPTION>
 </select>
 <input type="button" id="btn" value="提交" onclick="setsubmit(this)" />
 <br/>
 通过自定义跳转是在当前窗口打开或者新窗口打开
 <script> 
 function goUrl(obj){
 if(obj.getAttribute('target')=='_blank') open(obj.value);
 if(obj.getAttribute('target')=='_self') window.location.href=obj.value;
 }
 </script>
 <select onchange="goUrl(this.options[this.selectedIndex])"> 
 <option>==</option>
 <option value='http://caibaojian.com' target="_blank">caibaojian.com</option>
 <option value='http://caibaojian.com' target="_self">wpbars.com</option>
 </select>

演示地址

原文链接:伪select和真select地址跳转 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/wei-select.html)
评论已关闭。