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 までご連絡ください。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

See all articles