Simple implementation of js menu bar switching effect

Share a small case to switch the menu bar. Click on the left sidebar to show the right main page for your reference. The specific contents are as follows

First, implement the writing of html page:

<div id="header"></div>
<div id="main">
 <!-- Left sidebar -->
 <div class="affix">
 <h4> User center </h4>
 <ul>
 <li><a href="#container-myorder" > My order </a></li>
 <li><a href="#container-buy-stat-canvas" > Consumption statistics ( Canvas Version) </a></li>
 <li><a href="#container-buy-stat-svg" > Consumption statistics ( SVG Version) </a></li>
 <li><a href="#container-luck-lottery" > Lucky draw </a></li>
 </ul>
 </div>
 <!-- Right main area -->
 <div class="right-body">
 <div class="active" id="container-myorder"> My order </div>
 <div id="container-buy-stat-canvas"> Consumption statistics ( Canvas ) </div>
 <div id="container-buy-stat-svg"> Consumption statistics ( SVG ) </div>
 <div id="container-luck-lottery"> Lucky draw </div>
 </div>
</div>
<div id="footer"></div>

The second is the realization of css effect:

#main .affix {
 box-sizing: border-box;
 width: 210px;
 float: left;
 padding: 15px;
}
.affix h4 {
 font-size: 1.2em;
 margin: 10px 0;
}
.affix ul li{
 padding: 5px 20px;
}
.affix ul li.active a{
 color: #e4393c;
 font-weight: bold;
}
#main .right-body {
 box-sizing: border-box;
 margin-left: 210px;
 padding: 15px;
}
#main .right-body > div {
 display: none;
 min-height: 300px;
}
#main .right-body > div.active {
 display: block;
}

The last step is to use a simple js to click on the left sidebar option to show the right main area:

$('.affix ul li a').click(function(e){
 e.preventDefault();
 // Modify li Adj. active Location of 
 $(this).parent().addClass('active').siblings('.active').removeClass('active');
 // In the right body div Adj. active Location of 
 var id = $(this).attr('href');
 $(id).addClass('active').siblings('.active').removeClass('active');
});

To sum up, a simple menu switch is realized.

Click on "JavaScript Menu Topics" to learn more menu effects, and share one good topic with you: Javascript Cascade Menu Special Effects Summary