ブラウザ間で共通で再利用可能なタブ切り替え js コード_javascript スキル

最近js覚えたのでカッコつけてみました。 。 。それほど難しいことではありません。 。 。表示属性を変更するだけですか？クラスメートたちは私を無視しました。 。普遍的なものを作りたいと語った。 。 。なぜ ajax を使用するのでしょうか? 。 ? ? ?理解できませんでした。 。 。一体何が起こっているのでしょうか？ 。 。練習用に自分でも作ってみました。
要望: クラスメートが言う「一般」が何を意味するのかわかりません。 。 。あとは自分の理解に従っていきます。 。
①クロスブラウザ、IE6、FF、Chrome、Safari、Opera
②同じページで同じjsを使用して異なるタブを設定できます。
あまり話しても無駄なので、コードを見てみましょう。
1. HTML 部分 (実際には、これは何も興味深いことではありません。設定は 3 つあります。最初の 2 つは同じで、クリック イベントによってトリガーされ、最後の 1 つはマウスの動きによってトリガーされます)

コードをコピーします コードは次のとおりです:

• プロジェクト 1


• プロジェクト 3
/ul> ;



• クラスは"click"< までの項目 1 のコンテンツです。 / em>Trigger


• クラスは"tab1"2番目の項目コンテンツは"click"Trigger ;/ul>
  
  
  

  / li>
  
  • プロジェクト 2
  
  

  
  
• クラスは"tab1"アイテム1のコンテンツで、"click"

< li>クラスは"tab1"アイテム2のコンテンツは"click"

• クラスは ;"tab1"項目 3 のコンテンツは "click"

プロジェクト 1

🎜>

プロジェクト 3

によってトリガーされるアイテム 1 ;"mouseover"

• クラスは"tab2"< /em>項目 2 のコンテンツは "mouseover"<によってトリガーされます;/em>


• クラスは"tab2""アイテム3コンテンツ、"mouseover"< /li>
  

私が書いた JS は特定の構造でのみ動作します（本当に良いです！ ）、究極の普遍的な仕組みをどう作るかということは考えていませんでした。このjsにはどのような構造が必要ですか?これは最も外側の div コンテナであり、タイトルは ul リストで表され、コンテンツも ul リストです。この形式でなければ、私が書いた初心者のコードは実行できず、js を数行変更する必要があります。 。 。
2. スタイル CSS




コードをコピーします。


コードは次のとおりです。


body{

text-align:center;
}
.tab1, .tab2 {
幅:350px;

背景:#CC9933; 0.5; border-radius:5px 5px 5px; box-shadow: #CCC 4px 4px; float:left; } .name { リストスタイル:なし;

}

.name li {
幅:90px; 16px/30px ベルダナ、ジュネーブ、サンセリフ
background:#669900;
border-radius:5px 5px; >float:left;
display:inline;
}
li.selected{
background:#FF9900;
.content 🎜>高さ:500px;
表示:なし
}


これについては何も言うことがないようなので、簡単な CSS3 を追加してなんとかしました (絵はとても悪いです)。
3. js コード

コードをコピーします。 コードは次のとおりです:

/* *
* イベント処理用汎用関数
*/
var EventUtil = {
// ブラウザー間でイベント オブジェクトを取得します。event
getEvent : function(event){
return event : window.event>} ,
// ブラウザはイベント オブジェクトのターゲット DOM ノードを取得します
getTarget : function(event){
returnevent.target||event.srcElement;
},
//Cross -browser イベントをノードにバインドします。
addHandler: function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false); (element.attachEvent){
element.attachEvent("on" type,handler);
}else{
element["on" type] = ハンドラー; >};
//タブの切り替え方法を設定します
tabSwitch("tab1","click")
tabSwitch("tab2","mouseover"); */
// 受信パラメータ inClassName はバインドされたタブ クラス名に設定され、パラメータtriggerType はトリガー スイッチのタイプに設定されます
function tabSwitch(inClassName,triggerType){
//Get allオプション カード領域
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; kif(divs[k].className.indexOf(inClassName) > ; -1){
tabs.push(divs[k]);
}
}
}
//タブごとの切り替え関数を作成
for(var j = 0,len=tabs.length; j//タイトルとコンテンツのリストを取得します
var tab = tabs[j]>//各オプションのカード作成スイッチを使用します
(function(){
var nameUl = tab.getElementsByTagName("ul")[0];
var content = tab.getElementsByTagName("ul")[1];
//初期化tab
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");
//選択したクラスをタイトルに追加し、内容を表示します
for(var i=0, len) =nameList.length; i
nameList[i].className = "";
contentList[i].style.display = "none"; == ターゲット){
nameList[i].className = "選択";
contentList[i].style.display = "ブロック"; });
})();
}
}


この js 関数を拡張してみましょう (恥ずかしがらずに)。 。 。まず、クロスブラウザーでの使用に対処するために、イベント オブジェクトのいくつかの共通関数が定義されています。次の 2 行はタブ切り替え関数です。 1 つのパラメータはタブのコンテナとして定義されるクラスで、もう 1 つはスイッチをトリガーするタイプです。
最後は本物の JS です。アイデアは、特定のクラスとして定義されたコンテナーがタブにバインドされ、切り替え方法もカスタマイズできるということです。 tabSwitch("tab1","click"); は、すべての tab1 クラスがタブにバインドされ、クリック イベントによって切り替えられることを意味します。
切り替えの実装には、まず、クラス セレクター selectqueryAll を通じて同じタイプが選択され、バックアップ トラバーサル バージョンが作成されます (非常に非効率です)。デリゲートは、トリガー イベントをタイトル リスト ul にバインドします。

愚痴を言わせていただきますと、ulのDOM要素を取得する際にnameを変数名として使用した結果、ChromeとSafariではイベントのバインドができませんでした。これ！とても憂鬱です。 。 。
最後に言及するのは、これにはどのような効果がありますか?単なるタブの切り替えです（ナンセンス…） スタイルの設定を容易にするために、選択したタブのタイトルに「selected」クラスが追加されます。
最後に、改善の余地は本当にたくさんあると言いたいです (もちろん、あなたは小便の神様ではありません)。たとえば、クラスを追加する場合、クラス名の文字列連結により、元のクラス名が上書きされなくなります。たとえば、構造変化への適応性に対処できます。たとえば（質問がたくさんあります）。 。 。
他に何が間違っているのかについては、私に指導してください（この人は皮が厚いです、遠慮なく文句を言ってください）。
デモをアップロードするのは合理的ですか?
サンプルをダウンロードするにはここをクリックしてください