javascript - Utiliser CSS pour implémenter une barre de navigation sur le Web?

Question

1. Comment implémenter la barre de navigation comme le côté gauche de http://chuangzaoshi.com/code ?
2. Peut-il être entièrement réalisé en utilisant CSS ? Comment implémenter du CSS pur ? Comment implémenter js ?
Merci !

ps : Merci aux deux maîtres pour leurs réponses, je n'ai pas expliqué clairement Mes questions sont les suivantes :

左侧导航点击设计等大的标签会自动收起原来的，弹出现在的ul，同时右侧的内容又跟着变化。

Comment mettre en œuvre cela n'est pas clair, j'espère que vous pourrez me donner quelques conseils.

Answer 1

De quel effet faites-vous référence ? :hover Reverse, rien de bien compliqué.
Vous avez déjà donné l'exemple vous-même, ouvrez simplement son code et comparez-le.
Si vous ne comprenez pas un style ou un effet spécifique, vous pouvez demander plus de détails.
C'est trop large pour demander directement comment mettre en œuvre le tout. C'est comme l'exemple.
Avez-vous donné l'exemple de mise en œuvre ? Les css et js vous ont été présentés, vous pouvez donc vous y référer directement.

Basé sur votre question nouvellement ajoutée

Cliquez sur une grande étiquette telle que design dans la navigation de gauche et elle réduira automatiquement celle d'origine et fera apparaître l'ul actuel, tandis que le contenu de droite changera en conséquence.

Vous pouvez voir que chaque fois que vous cliquez sur une grande étiquette, cela passe en fait à une autre page. Les ul sous toutes les grandes étiquettes sont fermés par défaut.
Ensuite selon la page actuelle, vous constaterez que la grande étiquette actuelle aura un nom de classe active, et l'ul que vous souhaitez ouvrir le suivra, donc c'est simple :

la méthode CSS est .active + ul { display:block; }

la méthode jquery est $('.active').next('ul').css('display','block');

D'autres méthodes sont similaires. Elles obtiennent toutes la balise d'activité active et indiquent la petite liste de balises en dessous à afficher.
Selon l'exemple que vous avez donné, puisqu'il n'est pas écrit en CSS, mais inséré dans l'attribut style, il doit être implémenté en utilisant js.

Answer 2

Voulez-vous obtenir l'effet de décoloration lorsque vous passez la souris dessus ?

• Si implémenté avec CSS, utilisez une liste sur la gauche, puis changez le style, utilisez :hoverpseudo-classe pour correspondre au style de déplacement de la souris
  Par exemple

ul li {
    ... // 此处为常规样式
}

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

• S'il est implémenté avec JS, il est nécessaire de surveiller l'événement d'entrée de la souris de l'élément correspondantonmouseenter，将列表的项目中除了当前项，其他的样式都设置为常规样式，还要监听元素的鼠标离开事件onmouseleave Lorsque la souris quitte, le style défini lors du passage de la souris doit être restauré au style normal.

Mise à jour

Il est recommandé de décrire clairement les détails du problème la première fois que vous poserez une question la prochaine fois, sinon le temps du répondant sera perdu.

En réponse à la question que vous avez posée plus tard,

La mise en page HTML sur la gauche ressemble probablement à ceci

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

Ensuite, déplacez la souris sur celui blanchi, comme mentionné ci-dessus.
Si vous cliquez, ajoutez une classe CSS au <li> cliqué, tel que .active, puis ajoutez le <li>加上一个CSS类，比如.active，然后，加上之前的:hover précédent, le CSS est similaire à ceci :

ul li {
    ... // 此处为常规样式
}

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

ul li.active {
    ... // 此处为当前标签的样式
}

Bien sûr, puisque l'étiquette actuelle et le style de survol de la souris dans cet exemple sont les mêmes, vous pouvez combiner ul li:hover和ul li.active pour écrire

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

De cette façon, vous ne pourrez pas changer d'onglet. La mise en page HTML sur le côté droit ressemble à ceci :

<p id="main"><!-- 此处不一定要是id="main"，主要是为了方便定位右侧容器的根元素而已，也方便后面示例讲解 -->
    <p></p>
    ...
</p>

Par défaut, CSS sera utilisé pour afficher la classe #main中第一个子p显示出来，将其他的隐藏，建议也给p加上.active类，有.active, sinon elle sera masquée.

#main > p {
    display: none; /* 默认将所有#main下面一级的p全隐藏 */
}

#main > p.active { /* 这个表示#main下面有active类的子p */
    display: block;
}

Ensuite, écrivez des événements JS, mais le natif est plus pénible à écrire. Il est recommandé d'utiliser jQuery pour fonctionner. Voici deux exemples de méthodes d'écriture
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`，另外还要将右侧的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 = '';
            }
        }
    }
});

Si vous utilisez la bibliothèque jQuery, ce sera beaucoup plus simple, comme suit :

$('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');
});

Conclusion

Cela explique beaucoup de choses, mais je veux vous annoncer une nouvelle très dévastatrice. Autrement dit, l’exemple de site Web que vous avez donné ne le fait peut-être pas du tout. Ce site Web peut avoir 4 pages, puis passer les unes aux autres via des liens, et l'étiquette de la page actuelle sur chaque page est toujours allumée. (Je n’ai pas regardé attentivement le code source, mais je ne savais pas s’il s’agissait d’un routage basé sur les différentes adresses URL, alors j’ai juste dit « peut-être »).