javascript - Gunakan css untuk melaksanakan bar navigasi di web?

Question

1. Bagaimana untuk melaksanakan bar navigasi seperti sebelah kiri http://chuangzaoshi.com/code?
2 Bolehkah ia direalisasikan sepenuhnya menggunakan css? Bagaimana untuk melaksanakan css tulen? Bagaimana untuk melaksanakan js?
Terima kasih!

ps: Terima kasih kepada kedua-dua tuan atas jawapan mereka, saya tidak menerangkan dengan jelas soalan saya adalah seperti berikut

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

Bagaimana untuk melaksanakan ini tidak jelas, saya harap anda boleh memberi saya nasihat.

Answer 1

Kesan yang manakah yang anda maksudkan? :hover Songsang, tiada yang terlalu rumit.
Anda telah memberi contoh sendiri, cuma buka kodnya dan bandingkannya.
Jika anda tidak memahami gaya atau kesan tertentu, anda boleh meminta butiran lanjut.
Terlalu luas untuk bertanya secara langsung bagaimana untuk melaksanakan keseluruhannya
Adakah anda memberikan contoh pelaksanaan? Css dan js telah ditunjukkan kepada anda, jadi anda boleh merujuknya secara langsung.

Berdasarkan soalan anda yang baru ditambah

Klik pada label besar seperti reka bentuk dalam navigasi kiri dan ia secara automatik akan meruntuhkan yang asal dan muncul ul semasa, manakala kandungan di sebelah kanan akan berubah dengan sewajarnya.

Anda dapat melihat bahawa setiap kali anda mengklik pada label besar, ia sebenarnya melompat ke halaman lain Ul di bawah semua label besar ditutup secara lalai.
Kemudian mengikut halaman semasa, anda akan mendapati bahawa label besar semasa akan mempunyai nama kelas yang aktif, dan ul yang anda ingin buka akan mengikutinya, jadi mudah:

kaedah css ialah .active + ul { display:block; }

kaedah jquery ialah $('.active').next('ul').css('display','block');

Kaedah lain adalah serupa Semuanya memperoleh teg aktiviti aktif dan menunjukkan senarai teg kecil di bawahnya untuk dipaparkan.
Menurut contoh yang anda berikan, kerana ia tidak ditulis dalam css, tetapi dimasukkan ke dalam atribut gaya, ia harus dilaksanakan menggunakan js.

Answer 2

Adakah anda mahukan kesan perubahan warna apabila anda menggerakkan tetikus ke atasnya?

• Jika dilaksanakan dengan CSS, gunakan senarai di sebelah kiri, kemudian tukar gaya, gunakan :hoverpseudo-class untuk memadankan gaya menggerakkan tetikus ke atas
  Contohnya

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

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

• Jika dilaksanakan dengan JS, adalah perlu untuk memantau acara kemasukan tetikus elemen yang sepadanonmouseenter，将列表的项目中除了当前项，其他的样式都设置为常规样式，还要监听元素的鼠标离开事件onmouseleave Apabila tetikus pergi, gaya yang ditetapkan apabila tetikus melepasi perlu dipulihkan kepada gaya biasa.

Kemas kini

Adalah disyorkan agar anda menerangkan butiran masalah dengan jelas pada kali pertama anda bertanya soalan pada kali berikutnya, jika tidak, masa responden akan terbuang.

Sebagai jawapan kepada soalan yang anda ajukan kemudian,

Susun atur HTML di sebelah kiri mungkin seperti ini

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

Kemudian, gerakkan tetikus ke atas yang diputihkan, seperti yang dinyatakan di atas.
Jika anda mengklik, tambahkan kelas CSS pada <li> yang diklik, seperti .active, dan kemudian tambah <li>加上一个CSS类，比如.active，然后，加上之前的:hover sebelumnya, CSS adalah serupa dengan ini:

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

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

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

Sudah tentu, memandangkan label semasa dan gaya alih tetikus dalam contoh ini adalah sama, anda boleh menggabungkan ul li:hover和ul li.active untuk menulis

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

Dengan cara ini, anda tidak akan dapat menukar tab Reka letak HTML di sebelah kanan kelihatan seperti ini:

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

Secara lalai, CSS akan digunakan untuk memaparkan kelas #main中第一个子p显示出来，将其他的隐藏，建议也给p加上.active类，有.active, jika tidak, ia akan disembunyikan.

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

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

Kemudian, tulis acara JS, tetapi yang asli lebih menyakitkan untuk ditulis. Adalah disyorkan untuk menggunakan jQuery untuk beroperasi Berikut adalah dua contoh kaedah penulisan
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 = '';
            }
        }
    }
});

Jika anda menggunakan perpustakaan jQuery, ia akan menjadi lebih mudah, seperti berikut:

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

Kesimpulan

Ini menerangkan begitu banyak perkara, tetapi saya ingin memberitahu anda satu berita yang sangat menyedihkan. Iaitu, tapak web contoh yang anda berikan mungkin tidak melakukan ini sama sekali. Laman web ini mungkin mempunyai 4 halaman dan kemudian melompat ke satu sama lain melalui pautan, dan label halaman semasa pada setiap halaman sentiasa menyala. (Saya tidak melihat kod sumber dengan teliti, tetapi saya tidak tahu sama ada ia adalah penghalaan berdasarkan alamat URL yang berbeza, jadi saya hanya berkata "mungkin").