jQuery로 간단한 웹 스킨 교체 효과 예제

이 글은 jQuery로 간단한 웹 페이지 스킨 전환 효과를 설명합니다. 여러분과 공유하고, 구체적으로 다음과 같습니다:

이곳에4개 파일: skin.html、blue.css、green.html、red.html을 동일한 디렉토리에 위치해 있습니다。

1、skin.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<head>
  <title>스킨 전환 표시</title>
  <!--百度CDN의jquery을 참조-->
  <script language="javascript" type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  <link href="blue.css" id="skincss" rel="stylesheet" type="text/css"/>
  <script type="text/javascript">
    $('document').ready(function(){
      //스킨 전환
      $('#skin_list').change(function(){
        skin_name = $(this).val()
        skin_ skin_name + ".css"
        ("#skincss").attr("href", skin_href)
      });
    });
  </script>
</head>
</head>
<body>
  <!--스킨 목록-->
  <div>
    스킨 목록:
    <select id="skin_list">
      <option value ="blue">파란색</option>
      <option value ="green">녹색</option>
      <option value ="red">빨간색</option>
    </select>
  </div>
  <div>
    <ul>
      <li>오늘</li>
      <li>감정</li>
      <li>좋아요</li>
    </ul>
  </div>
</body>
</html>

중요한 것은 단 하나만 있으며, 몇 줄의 JavaScript 코드입니다. 전체 html 코드를 보여주기 위해 전체 코드를貼았습니다.

2、blue.css

li {color:blue;}

3、green.css

li {color:green;}

4、red.css

li {color:red;}

어떤 사용자는 한 문장만으로도 CSS 파일을 만들어야 한다고 생각할 수 있지만, 이는 큰 차이를 보일 것입니다. ^_^

5참고 사항: 다음과 같은 스크린 샷이 있습니다:

jQuery와 관련된 내용에 대해 더 알고 싶은 독자는 다음 웹사이트의 특辑을 확인할 수 있습니다: 《jQuery 확장 기술 요약》、《jQuery 일반 플러그인 및 사용 방법 요약》、《jQuery 드래그 앤 드롭 효과 및 기술 요약》、《jQuery 테이블(table) 작업 기술 요약》、《jQuery Ajax 사용 요약》、《jQuery 일반 클래식 효과 요약》、《jQuery 애니메이션 및 효과 사용 요약》 및 《jQuery 선택자 사용 요약》

본 문서에서 설명한 내용이 jQuery 프로그램 설계에 도움이 되길 바랍니다.

언급: 본문은 인터넷에서 가져왔으며, 원저자의 소유물입니다. 인터넷 사용자가 자발적으로 기여하고 업로드한 내용이며, 웹사이트는 소유권을 가지지 않으며, 인공 편집을 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 문제가 있음을 발견하면 notice#w로 이메일을 보내 주세요.3codebox.com에 이메일을 보내시면 (#을 @으로 변경해 주세요) 신고하시고 관련 증거를 제공해 주시면, 해당 내용이 사실로 확인되면 즉시 해당 내용을 삭제할 것입니다.

기본 튜토리얼