学习ing2017-06-26 10:52:29
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").
balas
0
