JQuery_jquery를 사용하여 웹페이지 스킨을 변경하는 방법-JS 튜토리얼-php.cn

JQuery_jquery를 사용하여 웹페이지 스킨을 변경하는 방법

WBOY

풀어 주다： 2016-05-16 15:57:14

원래의

1349명이 탐색했습니다.

이 기사의 예에서는 JQuery가 웹페이지의 스킨을 변경하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

사용자 경험을 더 좋게 만들기 위해 많은 웹 페이지에 스킨 변경 기능이 있는데 어떻게 구현되나요? 사실 스킨 변경은 해당 위치에서 CSS 스타일을 변경하는 것뿐입니다! !

간편하게 피부를 바꾸는 방법을 보여드리겠습니다

HTML 코드를 디자인할 때 몇 가지 팁에 주의하세요. 스킨 옵션 버튼의 ID를 스킨 스타일 파일 이름과 동일하게 설정하면 스킨 전환 작업이 훨씬 간단해집니다. 링크의 href 속성 값을 조작하여 스킨 변경을 수행하려면 ID 스타일의 연결 테이블이 있어야 합니다. 즉, 사용자는 클릭한 후 스킨을 변경할 수 있습니다. 그러나 사용자가 브라우저를 새로 고치거나 닫으면 스킨이 다시 초기화되므로 CooKie를 사용하여 현재 선택 사항을 저장하는 것이 좋습니다.

<!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></title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<!--  引入jQuery的cookie插件 -->
 <script src="js/jquery.cookie.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
 $(function(){
  var $li =$("#skin li");
  $li.click(function(){
  switchSkin( this.id );
  });
  var cookie_skin = $.cookie( "MyCssSkin");
  if (cookie_skin) {
  switchSkin( cookie_skin );
  }
 });
 function switchSkin(skinName){
   $("#"+skinName).addClass("selected").siblings().removeClass("selected");
  //当前<li>元素选中
  //去掉其它同辈<li>元素的选中
  $("#cssfile").attr("href","css/"+ skinName +".css");
  //设置不同皮肤
  $.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 });
 }
 //]]>
 </script>
</head>
<body>
<ul id="skin">
 <li id="skin_0" title="灰色" class="selected">灰色</li>
 <li id="skin_1" title="紫色">紫色</li>
 <li id="skin_2" title="红色">红色</li>
 <li id="skin_3" title="天蓝色">天蓝色</li>
 <li id="skin_4" title="橙色">橙色</li>
 <li id="skin_5" title="淡绿色">淡绿色</li>
</ul>
<div id="div_side_0">
<div id="news">
   <h1 class="title">时事新闻</h1>
 </div>
  </div>
  <div id="div_side_1">
 <div id="game">
  <h1 class="title">娱乐新闻</h1>
 </div>
</div>
</body>
</html>

로그인 후 복사

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.