Jquery adds one click color change function to the website

PetitQ JQuery/PHP 2023-8-12 eight hundred and thirty-four zero zero

Collection

The website often has such a function that users can click the corresponding color to adjust the color of the website. That is what we call the color matching function. Here's how to add the skin color matching function to the website.

section

Add a jquery cache cookie plug-in jquery. cookie. js; Place the following code above the</head>tag of the web page;

Want to be here? contact us bar

section

On the header file, add a default CSS file;

 < link  href = "css/default.css"  rel = "stylesheet"  type = "text/css"  id = "cssfile"  / >

section

Add the following JS code to the header file for color matching switching and COOKIE writing;

```
 < script  type = "text/javascript" >
```
```
 // <! [CDATA[
```
```
 $(function(){
```
```
 var $li =$("#skin a");
```
```
 $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");

```
 //The current<li>element is selected
```

 //Remove the selection of other peer<li>elements

 $("#cssfile").attr("href","css/"+ skinName +".css");

```
 //Set different skins
```

 $.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 });

```
 }
```
```
 //]]>
```
```
 < / script >
```

section

Make color matching switch button;

 < div  class = "bt-yf" >< a  href = "javascript:void(0);"  id = "yifu"  class = "bt-btn-yf"  title = "Skin changing" > skin peeler < / a >< / div >

Add CSS style of button:

 .bt-btn-yf { display : block ; width : 38px ; height : 38px ; background : #bababa  url ( ../images/yf.png )  no-repeat  50%  50% ; position : fixed ; z-index : nine thousand nine hundred and ninety-nine ; right : 10px ; bottom : 20% ; background-size : 80%  80% ; margin-top : 5px ; }

 .show-yf { display : none ; position : fixed ; right : 10px ; top : 50% ; width : 50px ; z-index : nine hundred and ninety-nine ; text-align : center ; }

 .show-yf a { display : block ; padding : 10px  zero ; height : 60px ; line-height : 40px ; }

 .qey { background : #fff ; color : #333 }

 .sey { background : #333 ; color : #fff ; }

```
  
```
```
 @media  ( max-width : 767px ) {
```

 .show-yf { right : 10px ; top : 40% ; width : 30px ; z-index : nine hundred and ninety-nine ; text-align : center ; }

 .show-yf a { display : block ; padding : 10px  zero ; height : 60px ; line-height : 40px ; }

```
 }
```

section

Add the following code at the bottom of the page;

 < div  class = "show-yf"  id = "skin" >

 < a  href = "javascript:;"  id = "white"  class = "qey"  title = Light > light colour < / a >

 < a  href = "javascript:;"  id = "black"  class = "sey"  title = Dark > Dark < / a >

```
 < / div >
```
```
 < script >
```
```
 $("#yifu").click(
```
```
 function(){
```
```
 $(".show-yf").slideToggle();
```
```
 });
```
```
 < / script >
```

In this way, the skin switching function of a website is ready. Note that the file path in each code should be modified correctly. The following files should be added:

Jquery. cookie. js: Cookies plug-in

Default.css: default CSS, content can be empty

Black.css: the style of each element of the website under dark skin

White.css: the style of each element of the website under the light skin