cari

Rumah >hujung hadapan web >tutorial js >jQuery melaksanakan kesan menandakan kedudukan menu semasa (menu sorotan latar belakang) selepas clicking_jquery

jQuery melaksanakan kesan menandakan kedudukan menu semasa (menu sorotan latar belakang) selepas clicking_jquery

WBOY
WBOYasal
2016-05-16 15:43:261273semak imbas

Contoh dalam artikel ini menerangkan kesan jQuery untuk menandakan kedudukan menu semasa (menu sorotan latar belakang) selepas mengklik. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah kesan menu jquery yang menyerlahkan latar belakang selepas mengklik, dan merupakan kesan menu yang diperibadikan. Saya telah melihat banyak menu di Internet, tetapi jarang untuk melihat kaedah yang mudah untuk melaksanakannya Menu ini secara keseluruhannya mudah Selepas mengklik mana-mana item menu pada bar navigasi, latar belakang item menu bertukar menjadi hitam tetikus bergerak Selepas pergi, ia kekal tetap dan kekal hitam, mengingati lokasi menu.

Kesan operasi adalah seperti yang ditunjukkan di bawah:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/jquery-menu-set-focus-style-codes/

Kod khusus adalah seperti berikut: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery点击后高亮背景的菜单特效</title>
<style>
*{ margin:0; padding:0; list-style:none;}
body{ font:normal 14px/24px 'MicroSoft YaHei';}
.cotrs{ width:960px; height:32px; line-height:32px; background:#999; margin:0 auto;}
.cotrs a{ height:32px; line-height:32px; color:#fff; text-decoration:none; padding:0px 10px; display:block; float:left;}
.cotrs a:hover{ text-decoration:none; background:#000;}
.cotrs a.thisclass{text-decoration:none; background:#000;}
</style>
</head>
<body>
<br><br><br>
<div class="cotrs">
<a href='javascript:' class="thisclass">首页</a>
<a href='javascript:'>菜单导航</a>
<a href='javascript:'>时间日期</a>
<a href='javascript:'>焦点图</a>
<a href='javascript:'>tab标签</a>
<a href='javascript:'>jquery特效</a>
<a href='javascript:'>在线客服</a>
<a href='javascript:'>广告代码</a>
<a href='javascript:'>相册代码</a>
<a href='javascript:'>图片特效</a>
<a href='javascript:'>名站特效</a>
<a href='javascript:'>其他代码</a>
<a href='javascript:'>HTML5</a>
</div>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(function(){
var cotrs = $(".cotrs a");
cotrs.click(function(){
 $(this).addClass("thisclass").siblings().removeClass("thisclass");
});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</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：jquery css melaksanakan menu drop-down menengah mendatar yang cantik-dengan kod sumber download_jqueryArtikel seterusnya：jquery css melaksanakan menu drop-down menengah mendatar yang cantik-dengan kod sumber download_jquery

Artikel berkaitan

Lihat lagi