Js enables css switching between two sets of single html pages

Step 1: import two sets of css files

[Html]
<Link rel = "stylesheet" type = "text/css" title = "style A" href = "css/people1.css"/>
<Link rel = "alternate stylesheet" type = "text/css" title = "style B" href = "css/lele2.css"/>

<Link rel = "stylesheet" type = "text/css" title = "style A" href = "css/people1.css"/>
<Link rel = "alternate stylesheet" type = "text/css" title = "style B" href = "css/lele2.css"/> Step 2: Write js functions for switching

[Html]
<Script type = "text/javascript">
 
Var title = "style ";
 
Function setStyle (){

// Only switch between style A and style B
If (title = "style "){
Title = "style B ";
} Else {
Title = "style ";
}

Var I, links;
// Use the dom method to retrieve all link elements
Links = document. getElementsByTagName ("link ");
// Determine whether each link element contains a style string to determine whether the link element is a style table link and whether the link contains the title attribute.
For (I = 0; links [I]; I ++ ){
If (links [I]. getAttribute ("rel"). indexOf ("style ")! =-1 & links [I]. getAttribute ("title ")){
// Set all links to disabled
Links [I]. disabled = true;
// Determine whether a specified title string exists in the title. Set the current link to visible to activate the current link.
If (links [I]. getAttribute ("title"). indexOf (title )! =-1 ){
Links [I]. disabled = false;
// Alert ("OK ");
}

}
}
}
 
</Script>

<Script type = "text/javascript">

Var title = "style ";

Function setStyle (){
 
// Only switch between style A and style B
If (title = "style "){
Title = "style B ";
} Else {
Title = "style ";
}
 
Var I, links;
// Use the dom method to retrieve all link elements
Links = document. getElementsByTagName ("link ");
// Determine whether each link element contains a style string to determine whether the link element is a style table link and whether the link contains the title attribute.
For (I = 0; links [I]; I ++ ){
If (links [I]. getAttribute ("rel"). indexOf ("style ")! =-1 & links [I]. getAttribute ("title ")){
// Set all links to disabled
Links [I]. disabled = true;
// Determine whether a specified title string exists in the title. Set the current link to visible to activate the current link.
If (links [I]. getAttribute ("title"). indexOf (title )! =-1 ){
Links [I]. disabled = false;
// Alert ("OK ");
}

}
}
}

</Script> Step 3: Call the switched js function in the html Tag.

[Html]
<A href = "#" onclick = "setStyle ();"> 1 </a>
<A href = "#" onclick = "setStyle ();"> 2 </a>
<A href = "#" onclick = "setStyle ();"> 3 </a>
<A href = "#" onclick = "setStyle ();"> 4 </a>
<A href = "#" onclick = "setStyle ();"> 5 </a>

<A href = "#" onclick = "setStyle ();"> 1 </a>
<A href = "#" onclick = "setStyle ();"> 2 </a>
<A href = "#" onclick = "setStyle ();"> 3 </a>
<A href = "#" onclick = "setStyle ();"> 4 </a>
<A href = "#" onclick = "setStyle ();"> 5 </a>