jQuery切換網頁面板儲存到Cookie例項

阿新 • • 發佈：2019-01-18

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title>jquery實現頁面面板切換並儲存-柯樂義</title><base target="_blank" />
 5     <link href="http://keleyi.com/keleyi/phtml/jqtexiao/25/css/default.css" 
 rel="stylesheet" type="text/css" />
 6     <link href="http://keleyi.com/keleyi/phtml/jqtexiao/25/css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
 7     <!--   引入jQuery -->
 8     <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"></ 
script>
 9     <!--   引入jQuery的cookie外掛 -->
10     <script src="http://keleyi.com/keleyi/phtml/jqtexiao/25/js/jquery.cookie.js" type="text/javascript"></script>
11     <script type="text/javascript">
12         //<![CDATA[
13         $(function(){
14             var $li =$("#skin li 
");
15             $li.click(function(){
16                 switchSkin( this.id );
17             });
18             var cookie_skin = $.cookie( "MyCssSkin");
19             if (cookie_skin) {
20                 switchSkin( cookie_skin );
21             }
22         });
23         function switchSkin(skinName){
24                  $("#"+skinName).addClass("selected")                 //當前<li>元素選中
25                               .siblings().removeClass("selected");  //去掉其它同輩<li>元素的選中
26                  $("#cssfile").attr("href", "http://keleyi.com/keleyi/phtml/jqtexiao/25/css/" + skinName + ".css"); //設定不同面板
27                 $.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });
28         }
29         //]]>
30     </script>
31 </head>
32 <body>
33 <div><h2>jQuery面板無重新整理切換並儲存</h2>
34 <div>請點選下面的各種演示的小方框設定以下內容的面板,當關閉頁面後再開，以下內容還是設定的顏色。因為儲存到cookie，所以一段時間後開啟頁面，仍然為最後設定的眼色。
35 <br /><a href="http://keleyi.com/keleyi/phtml/jqtexiao/25.htm" style="color:blue;text-decoration:none;">新開線上體驗視窗</a></div></div>
36     <ul id="skin">
37         <li id="skin_0" title="灰色" class="selected">灰色</li>
38         <li id="skin_1" title="紫色">紫色</li>
39         <li id="skin_2" title="紅色">紅色</li>
40         <li id="skin_3" title="天藍色">天藍色</li>
41         <li id="skin_4" title="橙色">橙色</li>
42         <li id="skin_5" title="淡綠色">淡綠色</li>
43     </ul>
44 
45     <div id="div_side_0">
46         <div id="news">
47             <h1 class="title"><a href="http://keleyi.com/menu/jquery/">jQuery</a></h1>
48         </div>
49     </div>
50 
51     <div id="div_side_1">
52         <div id="game">
53             <h1 class="title"><a href="http://keleyi.com/a/bjad/ifjrn3s1.htm">原文</a></h1>
54         </div>
55     </div>
56     
57 </body>
58 </html>

jQuery切換網頁面板儲存到Cookie例項

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="ht

jQuery實現無重新整理切換主題面板功能

主題面板切換功能在很多網站和系統中應用，使用者可以根據此功能設定自己喜歡的主題顏色風格，增強了使用者體驗。本文將圍繞如何使用jQuery實現點選無重新整理切換主題面板功能。檢視演示DEMO：https://www.helloweba.net/demo/style-switch/ 實現該功能的原理就是通過

jQuery EasyUI 選項卡面板tabs使用例項精講

1、對選項卡面板區域 div 設定 class=”easyui-tabs” 2、對選項卡面板區域新增多個 div，每個 div 就是一個選項卡（每個面板一定設定 title） 3、設定面板 f

jQuery EasyUI 摺疊面板accordion的使用例項

1、對摺疊面板區域 div 設定 class=”easyui-accordion” 2、在區域新增多個 div，每個 div 就是一個面板（每個面板一定要設定 title 屬性）。 3、設定面板

jQuery基礎（常用插件表單驗證，圖片放大鏡，自定義對象級，jQuery UI，面板折疊）

此外 cookie值添加圖標 tor 列表需要 droppable 使用 ddn 1.表單驗證插件——validate 該插件自帶包含必填、數字、URL在內容的驗證規則，即時顯示異常信息，此外，還允許自定義驗證規則，插件調用方法如下： $(form).vali

jQuery實現網頁右下角懸浮層提示

off eight slide ring height containe htm enter else 最近有同事提到類似網頁右下角的消息懸浮提示框的制作。我之前也做過一個類似的例子，很簡單。是仿QQ消息。現在感覺之前的那個例子只是說了實現原理，整體上給你的感覺還是太醜，今

jQuery——切換toggle

div utf char rip htm class jquery style ogg toggle()-----顯示隱藏 toggleClass-------添加類或者刪除類 <!DOCTYPE html> <html lang="en"> &l

Js/Jquery獲取網頁屏幕可見區域高度

eth set font 定位技術 eve top The width 獲取瀏覽器窗口的可視區域高度和寬度,滾動條高度 document.body.clientWidth ==> BODY對象寬度 document.body.clientHeight ==&

jQuery控制網頁字體大小和膚色

新網其中 utf jquery siblings substring fin -c ssi 在一些網站上經常看到有控制網頁膚色和字體大小的功能，接下來，我們將用兩個例子來實現這兩個功能。網頁字體大小首先我們在網頁中添加一些被控制大小的文字和字體控制的按鈕。 <

jquery 實現摺疊面板

1.dom元素 <div class="box"> <ul id="ul"> <li>Client agreement <div class="line"></div> <div class="content"&

Oracle儲存過程例項分析總結（程式碼）

1.儲存過程結構 1.1 第一個儲存過程 ? 1 2 3 4

Python3 Post登入並且儲存cookie登入其他頁面

import urllib.request import sys import http.cookiejar import urllib.parse from bs4 import BeautifulSoup import codecs import re #登入頁面 url = "h

python cookiejar儲存cookie資訊

cookie資訊是什麼? cookie，某些網站為了辨別使用者身份，只有登陸之後才能訪問某個頁面；進行一個會話跟蹤，將使用者的相關資訊包括使用者名稱等儲存到本地終端 from http import cookiejar from urllib.request import

oracle 儲存過程例項迴圈給查詢賦值遊標取值

CREATE OR REPLACE PROCEDURE p_updete_gs is --僅供參考 i_jdid varchar(32); i_ryid varchar(32); cursor cur is --

Jquery Datatable 單行修改儲存後，頁碼不跳動的實現

使用表格顯示時，經常有這樣的場景：我們需要對當行的資料進行修改操作，點選修改彈出修改的頁面，當修改結束後，重新整理表格顯示這樣，通常dataTable會refreshi一遍，從第一頁開始顯示。為了更好的體驗，當儲存後，希望表格資料得到了重新整理，當前頁碼資料也不會丟失，重新整理

網頁下載器urllib2例項

1、最簡潔方法 response：直接請求 response.getcode()：獲取狀態碼 response.read()：讀取內容 #coding:utf8 import urllib2 url = "http://www.baidu.com" print '第一種方

JQuery模擬網頁中自定義滑鼠右鍵選單

題外話.......最近在開發一個網站專案的時候,需要用到網頁自定義右鍵選單,在網上看了各路前輩大神的操作,頭暈目眩,為了達到目的,突然靈機一動,於是便有了這篇文章. 先放個效果圖(沾沾自喜,大神勿噴): 廢話不多說,進入正題: 1.首先我們要禁用掉原網頁中右鍵選單

模擬使用者登入（獲取cookie/例項化session）

第一種方法：通過本地瀏覽器儲存的cookie進行登陸 url1 = 'https://passport.cnblogs.com/user/signin?ReturnUrl=https%3A%2F%2Fwww.cnblogs.com%2F' url2 = 'https://www.cnblogs.

前端儲存-cookie-sessionStorage-loacalStorage

0. cookie h5之前，儲存主要是用cookies。cookies缺點有在請求頭上帶著資料，大小是4k之內。主Domain汙染。主要應用：購物車、客戶登入對於IE瀏覽器有UserData，大小是64k,只有IE瀏覽器支援。

HTML5中本地儲存cookie、sessionStorage、localStorage的區別

1、sessionStorage 適用於長期儲存資料，瀏覽器關閉後資料不丟失。 sessionStorage 用於在本地儲存一個會話（session）中的資料，這些資料只有在同一個會話中的頁面才能訪問並且當會話結束後資料也隨之銷燬。因此sessionStorage 不是一個持久化的本地儲存，

jQuery切換網頁面板儲存到Cookie例項

相關推薦