Jquery の $.cookie()_jquery に基づくクロスページ タブ ナビゲーションの実装コード

WBOY
リリース: 2016-05-16 18:10:06
オリジナル
1548 人が閲覧しました

--------tabs.js-----------------

复制代幣 代码如下:

$(function(){
//選択されたタブを初期化
var on= $.cookie('current_tab');
if (on!="" && !isNaN(on))
{
$(".nav li").eq(on).addClass("on").siblings().removeClass(); 🎜>}
//デフォルトのタブ
else
{ $.cookie('current_tab', 0) }
// タブを変更
$(".nav li").click (function(){
var current_tab = $(".nav li").index(this);
$.cookie('current_tab', current_tab);
window.location = $(this) .attr("href");
})
})

--------------css.css---- ------------------

复制代码 代码如下:
.nav { オーバーフロー:非表示; height:20px;}
.nav li { float:left;表示:インライン;パディング:3px;}
.nav li a:hover { color: yellow;
.nav li.on {background:#900; color:#FFF;}
.nav li.on a { color:#fff; }
.nav li.on a:hover { color: yellow; }
a { text-decoration:none; }

--------------------- 1.html ---------------- -------------------

复制代码代码如下:



無标题文档






其它两个页面一样,文件改一下可了
Mark Dzone 夜猫人
来自:http://www.cnblogs.com/dzone
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート