国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

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 {
    ... // 此處為常規(guī)樣式
}

ul li:hover {
    ... // 此處為鼠標(biāo)經(jīng)過的樣式
}

• 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

<ul>
    <li></li>
    ...
</ul>

Then, move the mouse over the whitened one, as mentioned above.
If you click, add a CSS class to the clicked <li>, such as .active, and then add the previous :hover, the CSS is similar to this:

ul li {
    ... // 此處為常規(guī)樣式
}

ul li:hover {
    ... // 此處為鼠標(biāo)經(jīng)過的樣式
}

ul li.active {
    ... // 此處為當(dāng)前標(biāo)簽的樣式
}

Of course, since the current label and the mouseover style in this example are the same, you can combine ul li:hover and ul li.active to write

ul li:hover,
ul li.active {
    ... // 此處為鼠標(biāo)經(jīng)過的樣式（即當(dāng)前標(biāo)簽樣式）
}

In this way, you won’t be able to switch tabs. The HTML layout on the right side looks like this:

<p id="main"><!-- 此處不一定要是id="main"，主要是為了方便定位右側(cè)容器的根元素而已，也方便后面示例講解 -->
    <p></p>
    ...
</p>

By default, CSS is used to display the first child p in #main and hide the others. It is recommended to add the .active class to p. The .active class will be displayed, otherwise it will be hidden.

#main > p {
    display: none; /* 默認(rèn)將所有#main下面一級的p全隱藏 */
}

#main > p.active { /* 這個表示#main下面有active類的子p */
    display: block;
}

Then, write JS events, but the native one is more painful to write. It is recommended to use jQuery to operate. Here are two examples of writing methods
Native:

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`，另外還要將右側(cè)的p也做一樣的操作（上面已經(jīng)取到p數(shù)組blocks）。
    bind_li.onclick = function() {
        for(var j = 0; j < len; j++) {
            if(j == i) { // j和i相等，表示為當(dāng)前點擊的
                li[j].className = 'active';
                blocks[j].className = 'active';
            } else {
                li[j].className = '';
                blocks[j].className = '';
            }
        }
    }
});

If you use the jQuery library, it will be much simpler, as follows:

$('ul li').click(function() { // 點擊的li元素
    var index = $(this).index();
    // 獲取當(dāng)前點擊的li元素在ul中的順序，
    // 稍后要同樣對#main中的p進行操作
    // 比如點的是第一個li
    // 也就要使#main中的第一個p顯示
    $(this)
        .addClass('active') // 給當(dāng)前l(fā)i加上.active
        .siblings('li') // 選中同一級其他的li
        .removeClass('active'); // 給同一級其他li去除.active
    $('#main > p').eq(index) // #main下面第index個p
        .addClass('active')
        .siblings('p')
        .removeClass('active');
});

Conclusion

This explains so much, but I want to tell you a very devastating news. That is, the example website you gave may not do this at all. This website may have 4 pages and then jump to each other through links, and the label of the current page on each page is always lit. (I didn’t look at the source code carefully, but I didn’t know whether it was routing based on the different URL addresses, so I just said “possibly”).