元生js+cssはtab切替機能を実現します。
本論文の例では、生css+jsのtab切替機能を実現するための具体的なコードを共有します。参考にしてください。具体的な内容は以下の通りです。
今では多くのuiフレームはtab機能を統合しています。彼らのapiのセットで使えばいいですが、jqueryプロジェクトではtab機能のために単独でuiライブラリを呼び出すことは大げさなことだと思います。だから、ここで元の生tabの実現を紹介しました。
解析：display属性により、各tabの表示を制御する。
以下は写真の例です。
コード部分は以下の通りです。
javascriptタブの操作方法のまとめ
jqueryタブの操作方法のまとめ
以上は皆さんのまとめたtab切替実現方法です。皆さんの学習に役立つように、この考え方に沿って自分のtabを作って、特効を切り替えたいです。
今では多くのuiフレームはtab機能を統合しています。彼らのapiのセットで使えばいいですが、jqueryプロジェクトではtab機能のために単独でuiライブラリを呼び出すことは大げさなことだと思います。だから、ここで元の生tabの実現を紹介しました。
解析：display属性により、各tabの表示を制御する。
以下は写真の例です。
コード部分は以下の通りです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./jquery-3.4.1.min.js"></script>
<title>tab </title>
<style>
body {
margin: 0 auto;
}
.tab-menu {
width: 100%;
background: #F5F6F8;
display: flex;
}
.tab-menu-span {
width: 150px;
height: 50px;
line-height: 50px;
cursor: pointer;
text-align: center;
}
.tab-menu-span-hover {
background: #0054A7;
color: #ffffff;
}
.tab-list {
position: relative;
}
.tab-list-span {
padding: 20px 10px;
height: 200px;
position: absolute;
top: 0;
display: none;
}
</style>
</head>
<body>
<div class="tab-class">
<!-- -->
<div class="tab-menu">
<div class="tab-menu-span">
</div>
<div class="tab-menu-span">
</div>
<div class="tab-menu-span">
</div>
</div>
<!-- tab list -->
<div class="tab-list">
<div class="tab-list-span">
1、 ， 。 ， ， ， ……</br>
2、 ， 。</br>
3、 ， ； ， 。</br>
</div>
<div class="tab-list-span">
4、 ， ； ！ ， 。</br>
5、 ， 。</br>
6、 ， ， 。 </br>
</div>
<div class="tab-list-span">
7、 ， 。</br>
8、 。</br>
9、 。</br>
10、 ， ， 。</br>
</div>
</div>
</div>
<script>
$('.tab-menu-span:first').addClass('tab-menu-span-hover');
$('.tab-list-span:first').css('display', 'block');
$('.tab-menu-span').hover(function () {
$(this).addClass('tab-menu-span-hover');
$(this).siblings().removeClass('tab-menu-span-hover');
$('.tab-list-span').css('display', 'none');
$('.tab-list-span').eq($(this).index()).css('display', 'block');
})
</script>
</body>
</html>javascriptタブの操作方法のまとめ
jqueryタブの操作方法のまとめ
以上は皆さんのまとめたtab切替実現方法です。皆さんの学習に役立つように、この考え方に沿って自分のtabを作って、特効を切り替えたいです。