cari

Rumah  >  Artikel  >  hujung hadapan web  >  jquery melaksanakan kaedah tetikus melalui tab TAB dengan kelewatan effect_jquery

jquery melaksanakan kaedah tetikus melalui tab TAB dengan kelewatan effect_jquery

WBOY
WBOYasal
2016-05-16 15:48:40969semak imbas

Contoh dalam artikel ini menerangkan cara jquery melaksanakan kesan kelewatan apabila tetikus melalui tab TAB. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Jika anda ingin melaksanakan fungsi tertentu selepas tetikus kekal pada DIV selama N saat, atau memaparkan suis TAB tanpa melalui paparan di bawah, anda boleh menggunakan kaedah berikut. 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>hoverTAB有延迟显示的效果</title>
<style type="text/css">
*{ padding:0; margin:0; list-style:none;font-size:12px;}
.mytab { background: #007373; width: 600px; margin-top: 100px; margin-right: auto; margin-left: auto; height: 230px; }
.mytab .title li { float: left; width: 100px; height: 30px; line-height: 30px; text-align: center; background: #099; border: 1px solid #FFF; margin-left: 14px; margin-top: 14px; }
.mytab .content li { line-height: 200px; text-align: center; height: 200px; width: 600px; clear: both; }
.mytab .title li.cur { color:#000; background: #FFF; font-weight: bold; border: 1px solid #000; }
a { color:#FFF}
.mytab .title li.cur a{ color:#000;}
</style>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
var t_li = $(".mytab .title li")
var c_li = $(".mytab .content li")
t_li.hover(function(){
var i = t_li.index($(this));
function way(){
t_li.removeClass("cur").eq(i).addClass("cur");
c_li.hide().eq(i).show();
}
timer=setTimeout(way,500);
},function(){
clearTimeout(timer);
});
});
</script>
</head>
<body>
<div class="mytab">
 <ul class="title">
  <li class="cur"><a href="/php/" target="_blank">PHP教程</a></li>
  <li><a href="/" target="_blank">JS特效</a></li>
  <li><a href="/" target="_blank">CSS布局</a></li>
  <li><a href="/js_tab/" target="_blank">TAB选项卡</a></li>
  <li><a href="/js_pic/" target="_blank">幻灯片</a></li>
 </ul>
  <ul class="content">
  <li>内容1</li>
  <li style=" display:none;">内容内容2</li>
  <li style=" display:none;">内容内容内容3</li>
  <li style=" display:none;">内容内容内容内容4</li>
  <li style=" display:none;">内容内容内容内容内容5</li>
 </ul>
</div>
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Pandangan pertama pada beberapa gaya asas AngularJS_AngularJSArtikel seterusnya：Pandangan pertama pada beberapa gaya asas AngularJS_AngularJS

Artikel berkaitan

Lihat lagi