<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动触发点击超链接</title>
</head>
<body>
<a href="#" id="targ">百度</a>
</body>
<script type="text/javascript">
document.onkeydown = function(event){
var e = event || window.event || arguments.callee.caller.arguments[0]
if(e&&e.keyCode==13){
// IE
if(document.all) {
document.getElementById("targ").click()
}
// 其它浏览器
else {
var ce = document.createEvent('HTMLEvents')
ce.initEvent("click",true,true)
document.getElementById("targ").dispatchEvent(ce)
}
}
}
</script>
</html>
<!DOCTYPE html><html>
<head>
<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
<title>无标题文档</title>
<style type="text/css">
*{margin:0padding:0}
.box{
position: fixed
right: 0
top:250px
}
.box ul{ list-style: none width: 120px }
.box ul li{
width:120px
height: 30px
line-height: 30px
border:1px solid #ccc
border-radius: 6px 0 0 6px
margin-left:50px
padding-left: 10px
margin-top:5px
cursor:pointer
}
.cur{ background-color: #ff4600 border:none color:#fff}
</style>
</head>
<body>
<div class='box'>
<ul>
<li>水果</li>
<li>相机</li>
</ul>
</div>
</body>
<script type="text/javascript">
$(function(){
$('div.box ul li').click(function(){
if( $(this).hasClass('cur') ){
$(this).animate({marginLeft:'50px'}).removeClass('cur')
}
else{
$(this).animate({marginLeft:'0px'}).addClass('cur')
}
})
})
</script>
</html>
其实思路不是很难，主要是通过边距的变化来实现移动，这里我用了通过改变margin-left的值来实现标签滑动的效果。
