Which effect are you referring to? :hover Reverse, nothing too complicated.
You have already given the example yourself, just open its code and compare it.
If you don’t understand a specific style or effect, you can ask for more details.
It’s too broad to directly ask how to implement the whole thing. It’s just like the example.
Have you given the implementation example? The css and js have been shown to you, so you can refer to them directly.

Based on your newly added question

Click a large label such as design in the left navigation to automatically collapse the original one and pop up the current ul, while the content on the right changes accordingly.

You can see that every time you click on a large label, it actually jumps to another page. The ul under all large labels are closed by default.
Then according to the current page, you will find that the current large label will have an active class name, and the ul you want to open will follow it, so it is simple:

css method is.active + ul { display:block; }

jquery method is$('.active').next('ul').css('display','block');

Other methods are similar. They all obtain the active activity tag and indicate the small tag list under it to display.
According to the example you gave, since it is not written in css, but inserted into the style attribute, it should be implemented using js.

Do you want the discoloration effect when you move the mouse over it?

• If you use CSS to implement it, use a list on the left side, then change the style, use the:hoverpseudo class to match the style of moving the mouse over
  For example

ul li { ... // 此处为常规样式 } ul li:hover { ... // 此处为鼠标经过的样式 }

• If implemented with JS, it is necessary to monitor the mouse entry event of the corresponding elementonmouseenter, set the styles of all items in the list to regular styles except the current item, and also listen to the mouse leave event of the elementonmouseleave, when the mouse leaves, the style set when the mouse passes over needs to be restored to the regular style.

Update

It is recommended that you describe the details of the problem clearly the first time you ask a question next time, otherwise the respondent's time will be wasted.

In response to the question you asked later,

The HTML layout on the left is probably like this

 
 ... 

Then, move the mouse over the whitened one, as mentioned above.
If you click, add a CSS class to the clicked

ul li { ... // 此处为常规样式 } ul li:hover { ... // 此处为鼠标经过的样式 } ul li.active { ... // 此处为当前标签的样式 }

ul li:hover, ul li.active { ... // 此处为鼠标经过的样式（即当前标签样式） }

 
 ... 

#main > p { display: none; /* 默认将所有#main下面一级的p全隐藏 */ } #main > p.active { /* 这个表示#main下面有active类的子p */ display: block; }

var li = document.getElementsByTagName('ul')[0].getElementByTagName('li'); // 这个需要自己去写，匹配到ul下的li var main = document.getElementById('main'); var blocks = main.children(); for(var i = 0, len = li.length; i < len; i++) { var bind_li = li[i]; // 给每一个li绑定点击事件，点击事件中，需要清除其他li的`.active`并给自己加上`.active`，另外还要将右侧的p也做一样的操作（上面已经取到p数组blocks）。 bind_li.onclick = function() { for(var j = 0; j < len; j++) { if(j == i) { // j和i相等，表示为当前点击的 li[j].className = 'active'; blocks[j].className = 'active'; } else { li[j].className = ''; blocks[j].className = ''; } } } });

$('ul li').click(function() { // 点击的li元素 var index = $(this).index(); // 获取当前点击的li元素在ul中的顺序， // 稍后要同样对#main中的p进行操作 // 比如点的是第一个li // 也就要使#main中的第一个p显示 $(this) .addClass('active') // 给当前li加上.active .siblings('li') // 选中同一级其他的li .removeClass('active'); // 给同一级其他li去除.active $('#main > p').eq(index) // #main下面第index个p .addClass('active') .siblings('p') .removeClass('active'); });