html使用方向键选中按钮

html使用方向键选中按钮,第1张

var currentIndex = 0

$("body").keydown(function(event) {

    if (event.keyCode == KEYCODE.UP) {

        //根据当前元素向上移动, 其余处理类似

        currentIndex --

    }

})

这问题好纠结,最少来个截图啊,给你写个吧,粘过去就行,不行的话留个q,继续问

<!DOCTYPE html>

<html>

 <head>

 <meta charset="utf-8" />

 <title>选项卡</title>

 <style type="text/css">

 ::-webkit-scrollbar{width:0px}

*{ margin:0 padding:0}

ul{

 list-style: none

}

.tab{ 

 width: 600px

 margin: 80px auto

}

.tab .tab_menu{

 float:left

 height: 138px

 width: 90px 

 overflow-y:scroll

}

.tab .tab_menu ul{width:60px}

.tab .tab_menu ul li{

 

 width: 60px

 text-align: center

 line-height: 30px

}

.tab .tab_menu ul li:last-child{

 border-right:none

 width:60px

}

.tab .tab_menu ul li.on{

 background: #999

}

.tab_box{float:left}

.tab .tab_box > div{

 width: 300px

 height: 138px

 border:1px solid #6cf

 display: none //将三个内容框架全隐藏,通过下面的:first-child属性只将第一个框架内容显示出来

}

.tab .tab_box > div:first-child{

 display: block

}

 </style>

 </head>

 <body>

 <!--整体构局说明,用ul完成按钮的横向布局,用div完成三个内容框架的垂直布局(类似于类表),然后将三个内容框架全隐藏,通过下面的:first-child属性只将第一个框架内容显示出来-->

 <div class="tab">

 <div class="tab_menu">

 <ul>

     <li class="on">实事</li>

     <li>政治</li>

     <li>体育</li>

     <li>实事</li>

     <li>政治</li>

     <li>体育</li>

     <li>实事</li>

     <li>政治</li>

     <li>体育</li>

     <li>实事</li>

     <li>政治</li>

     <li>体育</li>

 </ul>

 </div>

 <div class="tab_box">

     <div>实事内容</div>

     <div>政治内容</div>

     <div>体育内容</div>

     <div>实事内容</div>

     <div>政治内容</div>

     <div>体育内容</div>

     <div>实事内容</div>

     <div>政治内容</div>

     <div>体育内容</div>

     <div>实事内容</div>

     <div>政治内容</div>

     <div>体育内容</div>

 </div>

 </div>

 <script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

 <script type="text/javascript">

$(function(){

 $(".tab_menu ul li").click(function(){

 $(this).addClass("on").siblings().removeClass("on") //切换选中的按钮高亮状态

 var index=$(this).index() //获取被按下按钮的索引值,需要注意index是从0开始的

 $(".tab_box > div").eq(index).show().siblings().hide() //在按钮选中时在下面显示相应的内容,同时隐藏不需要的框架内容

 })

})

 </script>

 </body>

</html>

<button type="button" style="width:30pxheight:22px" onclick="jia(0)">-</button>

<input type="text" name="a" id="a" value="1" size="5"/>

<button type="button" style="width:30pxheight:22px" onclick="jia(1)">+</button>

日期:<input type="text" name="ri" id="ri" size="10"/>

<script>

function $(v){return document.getElementById(v)}

function jia(x){

var y=parseInt($("a").value)

if (x==0){y=y-1}else{y=y+1}

$("a").value=y

}

var d = new Date()

var str = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()

$("ri").value=str

</script>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7401768.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-05
下一篇 2023-04-05

发表评论

登录后才能评论

评论列表(0条)

保存