JavaScript ベースのユニバーサルタブの実装 (高い汎用性)_JavaScript スキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript ベースのユニバーサルタブの実装 (高い汎用性)_JavaScript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:21 PM

タブは、形式は異なりますが、一般に分類または Web ページのスペースを節約するために使用されます。 one タブのコード例は非常に多用途なので、以下に共有します。

コード例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>js实现的可以通用的选项卡代码实例</title>
<style type="text/css">
body {text-align:center;}
.tab1, .tab2 
{
width:350px;
margin:0 5px;
background:#CC9933;
opacity:0.5;
border-radius:5px 5px 5px 5px;
box-shadow:#CCC 4px 4px 4px;
text-align:left;
float:left;
display:inline;
}
.name 
{
list-style:none;
overflow:hidden;
}
.name li 
{
width:90px;
font:bold 16px/30px Verdana, Geneva, sans-serif;
background:#669900;
text-align:center;
border-radius:5px 5px 5px;
margin-right:5px;
float:left;
display:inline;
cursor:pointer;
}
li.selected{background:#FF9900;}
.content li 
{
height:500px;
display:none;
}
</style>
<script type="text/javascript">
/** 
* 事件处理通用函数
*/
var EventUtil={
getEvent:function(event)
{
return event &#63; event : window.event;
},
getTarget:function(event)
{
return event.target||event.srcElement;
},
addHandler:function(element,type,handler)
{
if(element.addEventListener)
{
element.addEventListener(type,handler,false);
}
else if(element.attachEvent)
{
element.attachEvent("on"+type,handler);
}
else
{
element["on"+type] = handler;
} 
}
};
/**
* 选项卡通用函数
*/
// 传入参数inClassName设定为绑定的选项卡类名，参数triggerType设定为触发切换的类型
function tabSwitch(inClassName,triggerType){
//取得全部选项卡区域
if(document.querySelectorAll)
{
var tabs=document.querySelectorAll("."+inClassName);
}
else
{
var divs=document.getElementsByTagName("div");
var tabs = new Array();
for(var k=0,lenDiv=divs.length;k<lenDiv;k++)
{
if(divs[k].className.indexOf(inClassName)>-1)
{
tabs.push(divs[k]);
}
}
}
//为每个选项卡建立切换功能
for(var j=0,len=tabs.length; j<len; j++)
{
//获取标题和内容列表
var tab = tabs[j];
//使用私有作用域为每个选项卡建立切换
(function(){
var nameUl = tab.getElementsByTagName("ul")[0];
var content = tab.getElementsByTagName("ul")[1];
//初始化选项卡
nameUl.getElementsByTagName("li")[0].className = "selected";
content.getElementsByTagName("li")[0].style.display = "block";
//添加事件委托
EventUtil.addHandler(nameUl,triggerType,function(event)
{
//获取事件对象
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//选项卡切换
if(target.nodeName.toLowerCase() == "li")
{
//分别取得标题列表项和内容列表项
var nameList = nameUl.getElementsByTagName("li");
var contentList = content.getElementsByTagName("li");
//标题添加selected类，并显示内容
for(var i=0,len=nameList.length; i<len; i++)
{
nameList[i].className = "";
contentList.style.display = "none";
if(nameList == target)
{
nameList.className = "selected";
contentList.style.display = "block";
}
}
}
});
})();
}
}
window.onload=function()
{
//设置选项卡切换方式
tabSwitch("tab1","click");
tabSwitch("tab2","mouseover");
}
</script>
</head>
<body>
<div class="tab1">
<ul class="name">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<ul class="content">
<li>类为<em>"tab1"</em>项目一内容,通过<em>"click"</em>触发</li>
<li>类为<em>"tab1"</em>项目二内容,通过<em>"click"</em>触发</li>
<li>类为<em>"tab1"</em>项目三内容,通过<em>"click"</em>触发</li>
</ul>
</div>
<div class="tab1">
<ul class="name">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<ul class="content">
<li>类为<em>"tab1"</em>项目一内容,通过<em>"click"</em>触发</li>
<li>类为<em>"tab1"</em>项目二内容,通过<em>"click"</em>触发</li>
<li>类为<em>"tab1"</em>项目三内容,通过<em>"click"</em>触发</li>
</ul>
</div>
<div class="tab2">
<ul class="name">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<ul class="content">
<li>类为<em>"tab2"</em>项目一内容,通过<em>"mouseover"</em>触发</li>
<li>类为<em>"tab2"</em>项目二内容,通过<em>"mouseover"</em>触发</li>
<li>类为<em>"tab2"</em>"项目三内容,通过<em>"mouseover"</em>触发</li>
</ul>
</div>
</body>
</html>

ログイン後にコピー

上記のコードはタブの機能を実装しています。実装プロセスを簡単に紹介します。

1. 実装原則:

コードが多いように思えるかもしれませんが、原理は実際には非常に簡単です。詳細については、コードのコメントを参照して自分の考えに頼ってください。デフォルトの状態では、タブのタイトルが表示され、最初のタイトルには指定されたスタイルクラスが割り当てられ、最初のタブのコンテンツのみが表示され、その他は非表示になります。。各タブのタイトルは指定されたイベントハンドラーに登録され、クリックまたはスワイプ操作が実行されると、主にトラバーサルによって対応するスイッチが実現されます。詳細については、ここでは説明しません。

2. コードのコメント:

1.var EventUtil={} は、イベントオブジェクト、イベントソースオブジェクト、およびイベント処理関数バインディングを取得する操作を内部で実装するオブジェクトリテラルを宣言し、主要なブラウザーと互換性があります。
2. getEvent:function(event){returnevent?event:window.event;}、すべての主要なブラウザと互換性のあるイベントオブジェクトを取得します。
3.getTarget:function(event){returnevent.target||event.srcElement;}、主要なブラウザと互換性のあるイベントソースオブジェクトを取得します。
4.addHandler:function(element,type,handler){}、登録されたイベント処理関数は、すべての主要なブラウザと互換性があります。
5.function tabSwitch(inClassName,triggerType){}、この関数は、指定されたオブジェクトの指定されたイベント処理関数を登録できます。最初のパラメータは、そのような名前のオブジェクトを取得するために使用されるスタイルクラス名です。 2 つはイベントタイプです。
6.if(document.querySelectorAll)、ブラウザが querySelectorAll 関数をサポートしているかどうかを判断するために使用されます。
7.var tabs=document.querySelectorAll("."+inClassName) (サポートされている場合) は、指定されたクラス名のオブジェクトを取得します。
8.var divs=document.getElementsByTagName("div")、div オブジェクトのコレクションを取得します。
9.var tabs=new Array() は、指定されたスタイルクラスを持つ div オブジェクトを格納する配列を作成します。
10.for(var k=0,lenDiv=divs.length;k 11.if(divs[k].className.indexOf(inClassName)>-1)、div のスタイルクラス名に指定されたスタイルクラス名が含まれる場合。
12. tabs.push(divs[k])、この div を配列に保存します。
13.for(var j=0,len=tabs.length;j 14.var tab=tabs[j]、div オブジェクトの参照を tab に代入します。
15.(function(){})()、無名関数を宣言して実行します。
16.var nameUl=tab.getElementsByTagName("ul")[0]、ul コレクションの最初のもの、つまりタブのタイトル部分を取得します。
17.var content=tab.getElementsByTagName("ul")[1]、タブのコンテンツ部分を取得します。
18.nameUl.getElementsByTagName("li")[0].className="selected"、タブタイトル部分の最初のタイトルのスタイルクラス値を selected に設定します。
19.content.getElementsByTagName("li")[0].style.display="block"、タブの最初のコンテンツ部分を表示するように設定します。
20.EventUtil.addHandler(nameUl,triggerType,function(event){})、この関数はタブの実装の中核部分であり、3 つのパラメータがあります。最初のパラメータはタイトル部分の ul オブジェクトで、2 番目のパラメータはイベントタイプ、3 番目の関数は登録するイベント処理関数です。
21.varevent=EventUtil.getEvent(event)、イベントオブジェクトを取得します。
22.var target=EventUtil.getTarget(event)、イベントソースオブジェクトを取得します。
23.if(target.nodeName.toLowerCase()=="li")、イベントソースオブジェクトのラベル名がliであるかどうかを判定します。
24.var nameList=nameUl.getElementsByTagName("li")は、タブタイトル部分のli要素のコレクションを取得します。
25.var contentList=content.getElementsByTagName("li")、タブコンテンツ部分のli要素の組み合わせを取得します。
26.for(var i=0,len=nameList.length;i 27.nameList.className=""、各タイトル li 要素のスタイルクラスをクリアします。
28.contentList.style.display="none"、各タブのコンテンツ部分の li を非表示にします。
29.if(nameList==target)、指定されたインデックスのタイトル li がイベントソースオブジェクト、つまり現在マウスでクリックされている li またはマウスがスライドしている li の場合。
30.nameList.className="selected" に指定し、指定したスタイルクラスをそれに追加します。
31.contentList.style.display="block" は、インデックスに対応するコンテンツ li を表示します。

上記の内容は、コードとコメントを含めて比較的詳しく紹介されており、皆さんがタブの js 実装について学ぶのに役立つことを願っています。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7628

CakePHP チュートリアル

1389

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

141

Related knowledge

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？ Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

Console.log出力の違い結果：なぜ2つの呼び出しが異なるのですか？ Apr 04, 2025 pm 05:12 PM

Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？または： Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？ Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。

JavaScriptは学ぶのが難しいですか？ Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。