CSSソースコード
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<style>
*{
margin:0;padding: 0;}
body{
padding: 50px}
a{
text-decoration:none;}
#list{
list-style-type: none}
#list a{
float: left;
background: orange;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
}
#list a:hover{
opacity: 0.6}
.clear{
clear: both;}
#content div{
width: 298px;height: 150px;
border:1px solid green;
}
#content{
height: 152px;overflow: hidden;
}
</style>
</style>
</head>
<body>
<div id="tab">
<ul id="list">
<li><a href="#div1">菜单1</a></li>
<li><a href="#div2">菜单2</a></li>
<li><a href="#div3">菜单3</a></li>
</ul>
</div>
<div class="clear"></div>
<div id="content">
<div id="div1">内容111111111111.......</div>
<div id="div2">内容222222222222.......</div>
<div id="div3">内容333333333333......</div>
</div>
</body>
</html>
ソースコード分析
コア原則であるタグのアンカー効果+親divの制限された幅+多くの部分が非表示になっています。
1.タグのアンカー効果を実現するにはどうすればよいですか？
href属性は、対応する位置を見つけるのに適しています。セレクターと同様に、通常はidです。
<li><a href="#div1">菜单1</a></li>
<li><a href="#div2">菜单2</a></li>
<li><a href="#div3">菜单3</a></li>
<div id="div1">内容111111111111.......</div>
<div id="div2">内容222222222222.......</div>
<div id="div3">内容333333333333......</div>
2.親divの制限された幅+より部分的な非表示を実現するにはどうすればよいですか？
#content{
height: 152px;overflow: hidden;
}
3.ラベルを移動して透明度を変更するにはどうすればよいですか？
不透明度プロパティ
#list a:hover{
opacity: 0.6}
4.clear:both通常、どこに書かれていますか？
通常は別のクラスで記述されているので、使用するときは直接呼び出すとよいでしょう。簡単な方法
.clear{
clear: both;}
JavaScriptソースコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡2</title>
<style>
*{
margin:0px;padding: 0px }
body{
padding: 50px}
#list{
list-style-type: none;
height: 30px;
font-size: 14px
}
#list li{
width: 80px;
margin-right: 5px;
height: 30px; line-height: 30px;
text-align: center;
border: solid green 1px;border-bottom: none;
border-radius: 5px 5px 0 0;
float: left;
cursor: pointer;
}
#content div{
width: 400px;
height: 150px;
border:1px solid green;
display: none;
background: rgba(100,50,20,0.2);
}
#content div.show{
display: block;}
#list li:hover{
background: rgba(100,50,20,0.4);
}
.active{
background: rgba(100,50,20,0.2);}
</style>
</head>
<body>
<div id="tab">
<ul id="list">
<li class="active">第一部分</li>
<li>第二部分</li>
<li>第三部分</li>
</ul>
<div id="content">
<div class="show">JS进阶......</div>
<div>JQ精讲......</div>
<div>JS+JQ+CSS3特效、技巧、案例专题......</div>
</div>
</div>
<script>
// var list=document.getElementById('list')
// console.log(list);
// var content=document.getElementById('content')
// var oli=list.getElementsByTagName('li')
// console.log(oli);
// var li_content=content.getElementsByTagName('div')
var oli=document.getElementById('list').getElementsByTagName('li')
// console.log(oli)
var li_content=document.getElementById('content').getElementsByTagName('div')
for(var i=0;i<oli.length;i++){
oli[i].index=i
// console.log(oli[i].index)
oli[i].onclick=function(){
//首先获取到当前被点击li的索引
//alert(this.index)
//点击后让相应的div显示到当前
for(var j=0;j<li_content.length;j++){
oli[j].className="";
li_content[j].style.display='none'
}
li_content[this.index].style.display='block';
oli[this.index].className="active";
}
}
</script>
</body>
</html>
JavaScriptソースコードの解析
タブヘッダーのラベルは、インデックスliを介しタブコンテンツdivのdivラベルdisplayの属性を制御することで、タブのオプション切り替えを実現できます。
1.いくつかのスタイルが設定されていますが、効果がない理由は何でしょうか。
優先すると特殊効果が出ない場合があります
優先度が以前より低く設定されるようになりました
親タグを追加することで優先度を上げることができます
2.スタイルの優先度を上げる方法は？
親タグを追加することで優先度を上げることができます
3.ラベルのグループの途中でラベルを実現するにはどうすればよいですか？このラベルのスタイルは変わりますか？
自作のアクティベーションスタイルをポイントラベルに動的に追加します
oli[this.index].className="active";
4.要素のすべてのクラスを削除するにはどうすればよいですか？
domオブジェクトのclassNameにはnull値が割り当てられます
oli[j].className="";
5.非表示の要素を表示するにはどうすればよいですか？
domオブジェクトのスタイルのdisplayプロパティをnoneに設定します
li_content[j].style.display='none'
6. IDがcontentであるdiv内に別のdivを取得するにはどうすればよいですか？
getElementの連鎖書き込み
（getElementはドキュメントのメソッドであるため、実際にはdomオブジェクトのメソッドでもあります）
var li_content=document.getElementById('content').getElementsByTagName('div')
jQueryソースコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡3</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
*{
margin: 0px;padding: 0px}
body{
padding: 50px}
ul {
list-style-type: none;}
#list{
height: 30px;line-height: 30px;
margin-bottom: 2px
}
#list li{
width: 100px;text-align: center;
border:1px solid green;
background: rgba(100,50,20,0.2);
float:left;
cursor: pointer;
}
#content{
width: 304px;height: 150px;
border:1px solid green;border-top: none;
}
#content div{
display: none; }
#content div.show{
display: block;}
#list li.active{
background: #fff;
border-bottom: none;
}
</style>
</head>
<body>
<div id="tab">
<ul id="list">
<li class="active">第一部分</li>
<li>第二部分</li>
<li>第三部分</li>
</ul>
<div id="content">
<div class="show">JS进阶......</div>
<div>JQ精讲......</div>
<div>JS+JQ+CSS3特效、技巧、案例专题......</div>
</div>
</div>
<script>
$(function(){
var $li=$('#list li')
$li.click(function(){
$(this).addClass('active').siblings().removeClass('active');
$('#content div').eq($li.index(this)).show().siblings().hide()
})
})
</script>
</body>
</html>
jQueryソースコード分析
ul>liタブのタブヘッダーdivを作成し、複数をタブのコンテンツを作成します。対応するものをクリックし、対応するものliに切り替えdiv、を使用index()してliインデックスを取得し、にdiv連絡します。
1.要素が配置されている親の同じ種類の子のインデックスを取得するにはどうすればよいですか？
index（）メソッド
$('#content div').eq($li.index(this)).show().siblings().hide()
2.自分以外のすべてのピアを選択するにはどうすればよいですか？
not（）メソッドを使用する必要はありません。シンプルで使いやすいsiblings（）を使用するだけで十分です。
$(this).addClass('active').siblings().removeClass('active');
3.にclear:both加えフロートをクリアするために他にどのような良い方法を使用できますか？
設定margin-bottomすると、同じ行（複数行）にないことが保証されるためfloat、効果が自然に影響を受けることはありません。
#list{
height: 30px;line-height: 30px;
margin-bottom: 2px
}