基于jquery實現最簡單的選項卡切換效果
更新時間：2016年05月08日 07:06:42 作者：張楊
這篇文章主要介紹了基于jquery實現最簡單的選項卡切換效果的相關資料，具有一定的參考價值，感興趣的朋友可以參考一下
這個功能在現在的網站中使用較為普遍，就是以選項卡的形式來對一些內容做了分類。，比如下面的天貓商城。
下面的源碼是仿照天貓寫的一個選項卡，實現起來的效果如下。
主要是利用我們在點擊相應板塊是觸發(fā)它的單擊事件，在單擊事件中再對內容顯示框(tabbox)進行相應項的顯示和隱藏操作。
同時利用hover為其添加了鼠標滑過時的效果。
代碼：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link href="css/style1.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.3.2.min.js"></script>
<title></title>
<script>
$(function () {
var $div_li = $("div.tab_menu ul li");
$div_li.click(function () { //定義了tan_menu對應的單擊事件，也就是類別的單擊事件。
$(this).addClass("selected")
.siblings().removeClass("selected");
var index = $div_li.index(this);
$("div.tab_box>div").eq(index).show()
.siblings().hide();
}).hover(function () { //定義了鼠標滑過特效
$(this).addClass("hover");
}, function () {
$(this).removeClass("hover");
});
});
</script>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">時事</li>
<li>體育</li>
<li>娛樂</li>
</ul>
</div>
<div class="tab_box">
<div>時事</div>
<div class="hide">體育</div>
<div class="hide">娛樂</div>
</div>
</div>
</body>
</html>
以上就是本文的全部內容，希望對大家熟練掌握實現選項卡切換的技巧有所幫助。
相關文章
這篇文章主要介紹了jquery選擇checked在ie8普通模式下的問題,需要的朋友可以參考下2014-02-02
昨天看到QQ登錄的時候，可以選擇以前登錄過的賬戶，這個東西也可以在網站登錄的時候用到，所以我就想做一個這樣的插件；在網上查了很多，沒有找到合適自己的，所以決定自動制作一個2014-08-08
js獲取通過ajax返回的map型的JSONArray的方法
下面是js獲取通過ajax返回的map型的JSONArray的詳細代碼，需要的朋友可以參考下2014-01-01
這篇文章主要為大家詳細介紹了layui彈出層效果的實現代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
在我們日常繪制canvas的時候都不可避免的遇到一個問題，那就是canvas繪制出來的東西可能會有模糊，所以本文為大家準備了解決canvas繪制模糊的方法，希望對大家有所幫助2023-06-06
qprint是一個基于jquery編寫的頁面打印的一個小插件，但是不得不承認這個插件確實很厲害，下面這篇文章主要給大家介紹了關于利用jqprint插件如何打印頁面內容的實現方法，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。2018-01-01
這篇文章主要介紹了Jquery ajax書寫方法代碼實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-06-06
這篇文章主要為大家詳細介紹了layui前段框架日期控件使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
jQuery綁定事件監(jiān)聽bind和移除事件監(jiān)聽unbind用法實例詳解
這篇文章主要介紹了jQuery綁定事件監(jiān)聽bind和移除事件監(jiān)聽unbind用法,結合實例形式詳細分析了綁定事件監(jiān)聽bind和移除事件監(jiān)聽unbind的具體使用技巧與相關注意事項,需要的朋友可以參考下2016-01-01
本文整理了一些常用的特效示例，如：.jQuery fadeIn() 用于淡入已隱藏的元素、jQuery fadeToggle()方法可以在 fadeIn()與 fadeOut()方法之間進行切換等等，感興趣的朋友可以參考下哈2013-06-06