JavaScriptを使用したタブラベル切り替え効果の説明-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScriptを使用したタブラベル切り替え効果の説明

巴扎黑

Aug 17, 2017 pm 02:13 PM

javascript js スイッチ

これはjsベースのタブ切り替えエフェクトです。jQueryを使わずにネイティブJavaScriptで作成したタブ切り替えエフェクトのソースコードです。上のタイトルをクリックすると、対応するページへの切り替え機能が実現します。これは非常に実用的です。レンダリング操作:

ヒント: ブラウザが正常に実行できない場合は、閲覧モードを切り替えてみてください。みんなで共有するためにjsで実装したタブラベル切り替えエフェクトコードは以下の通りです

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js实现tab标签切换效果</title>
<style>
*{ margin:0; padding:0; list-style:none;}
body{ font-size:12px;}

#menu{width:360px; overflow:hidden; margin:100px auto;border:1px solid #BF9660;}
#menu #nav {display:block;width:100%;padding:0;margin:0;list-style:none;}
#menu #nav li {float:left;width:120px;}
#menu #nav li a {display:block;line-height:27px;text-decoration:none;padding:0 0 0 5px; text-align:center; color:#333;}
#menu_con{ width:358px; height:135px; border-top:none}
.tag{ padding:10px; overflow:hidden;}
.selected{background:#C5A069; color:#fff;}
</style>
</head>
<body>

<!--代码部分begin-->
<p id="menu">
<!--tag标题-->
  <ul id="nav">
    <li><a href="#" class="selected">jQuery特效</a></li>
    <li><a href="#" class="">tab切换</a></li>
    <li><a href="#" class="">菜单导航</a></li>
  </ul>
<!--二级菜单-->
  <p id="menu_con">
    <p class="tag" style="display:block">
      这里是jQuery特效内容列表
     </p> 
    <p class="tag" style="display:none">
      这里是tab切换效果  
     </p> 
    <p class="tag" style="display:none">
      这里是菜单导航效果
    </p> 
</p>
</p>
<script>
var tabs=function(){
  function tag(name,elem){
    return (elem||document).getElementsByTagName(name);
  }
  //获得相应ID的元素
  function id(name){
    return document.getElementById(name);
  }
  function first(elem){
    elem=elem.firstChild;
    return elem&&elem.nodeType==1? elem:next(elem);
  }
  function next(elem){
    do{
      elem=elem.nextSibling; 
    }while(
      elem&&elem.nodeType!=1 
    )
    return elem;
  }
  return {
    set:function(elemId,tabId){
      var elem=tag("li",id(elemId));
      var tabs=tag("p",id(tabId));
      var listNum=elem.length;
      var tabNum=tabs.length;
      for(var i=0;i<listNum;i++){
          elem[i].onclick=(function(i){
            return function(){
              for(var j=0;j<tabNum;j++){
                if(i==j){
                  tabs[j].style.display="block";
                  //alert(elem[j].firstChild);
                  elem[j].firstChild.className="selected";
                }
                else{
                  tabs[j].style.display="none";
                  elem[j].firstChild.className="";
                }
              }
            }
          })(i)
      }
    }
  }
}();
tabs.set("nav","menu_con");//执行
</script>
<!--代码部分end-->


</body>
</html>

ログイン後にコピー

以上がJavaScriptを使用したタブラベル切り替え効果の説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

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

7530

CakePHP チュートリアル

1379

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

Win11 Activation Key Permanent

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

Related knowledge

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネットアプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワークインタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザーエクスペリエンスが向上することが挙げられます。欠点としては、モデルサイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピュータービジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。

Xiaomi Mi 14Ultraで4gと5gを切り替えるにはどうすればよいですか? Feb 23, 2024 am 11:49 AM

Xiaomi 14Ultraは、今年最も人気のあるXiaomiモデルの1つです.Xiaomi 14Ultraは、プロセッサとさまざまな構成をアップグレードするだけでなく、多くの新しい機能アプリケーションをユーザーにもたらします.これは、Xiaomi 14Ultra携帯電話の販売からもわかります.人気がありますが、まだ知られていない一般的に使用される機能がいくつかあります。では、Xiaomi 14Ultraはどのようにして4gと5gを切り替えるのでしょうか？以下に具体的な内容をご紹介していきます！ Xiaomi 14Ultraで4gと5gを切り替えるにはどうすればよいですか? 1. 電話機の設定メニューを開きます。 2. 設定メニューで「ネットワーク」および「モバイルネットワーク」オプションを見つけて選択します。 3. モバイルネットワーク設定に、[優先ネットワークタイプ] オプションが表示されます。 4. このオプションをクリックまたは選択すると、次の内容が表示されます。

win11 home版からprofessional版へ切り替える操作チュートリアル_win11 home版からprofessional版へ切り替える操作チュートリアル Mar 20, 2024 pm 01:58 PM

Win11 Home Edition を Win11 Professional Edition に変換するにはどうすればよいですか? Win11 システムは Home Edition、Professional Edition、Enterprise Edition などに分かれており、ほとんどの Win11 ノートブックには Win11 Home Edition システムがプリインストールされています。今日は、エディターが win11 ホームバージョンからプロフェッショナルバージョンに切り替える手順を示します! 1. まず、win11 デスクトップとプロパティでこのコンピューターを右クリックします。 2. 「プロダクトキーの変更」または「Windows のアップグレード」をクリックします。 3. 入力後、「プロダクトキーの変更」をクリックします。 4. アクティベーションキー 8G7XN-V7YWC-W8RPC-V73KB-YWRDB を入力し、[次へ] を選択します。 5.その後、成功を促すメッセージが表示されるので、win11 home バージョンを win11 professional バージョンにアップグレードできます。

Win10システムでデュアルシステム切り替えを実装する方法 Jan 03, 2024 pm 05:41 PM

Win システムに初めて触れたとき、多くの友人は慣れていないかもしれません。コンピューターにはデュアルシステムがあります。現時点では、実際に 2 つのシステムを切り替えることができます。切り替えの詳細な手順を見てみましょう。 2 つのシステム間で。 win10システムで2つのシステムを切り替える方法 1. ショートカットキーの切り替え 1. 「win」+「R」キーを押してファイル名を指定して実行を開きます 2. 実行ボックスに「msconfig」と入力し、「OK」をクリックします 3. 開いた「」で「システム構成」インターフェイスで、必要なシステムを選択し、「デフォルトとして設定」をクリックします。完了後、「再起動」で切り替えを完了できます。方法 2. 起動時に切り替えを選択します。 1. デュアルシステムの場合、選択操作インターフェイス起動時に表示されます。キーボードの「上下キー」を使用してシステムを選択できます。

Apple コンピュータのデュアルシステムブートモードを切り替える Feb 19, 2024 pm 06:50 PM

起動時に Apple デュアルシステムを切り替える方法 Apple コンピュータは強力なデバイスなので、独自の macOS オペレーティングシステムに加えて、Windows などの他のオペレーティングシステムをインストールしてデュアルシステム切り替えを実現することもできます。では、起動時に 2 つのシステムを切り替えるにはどうすればよいでしょうか?この記事では、Apple コンピュータのデュアルシステムを切り替える方法を紹介します。まず、デュアルシステムをインストールする前に、Apple コンピュータがデュアルシステムの切り替えをサポートしているかどうかを確認する必要があります。一般的に言えば、Apple コンピュータは以下に基づいています。

Excelでブックを切り替えるショートカットキーの使い方 Mar 20, 2024 pm 01:50 PM

Excel ソフトウェアのアプリケーションでは、一部の操作を簡単かつ迅速に行うためにショートカットキーを使用することに慣れています。Excel の複数のテーブル間に関連するデータがある場合があります。それを表示するときに、タスクを常に切り替える必要があります。高速な切り替え方法を使用すると、切り替えにかかる無駄な時間が大幅に節約され、作業効率が大幅に向上します。クイック切り替えを完了するにはどのような方法を使用できますか? この問題に対処するために、今日は編集者がそれについてお話します。内容は次のとおりです。 Excel でブックを切り替えるショートカットキーを使用します。 1. まず、開いた Excel テーブルの下部に複数のワークブックが表示されますが、下の図に示すように、異なるワークブックをすばやく切り替える必要があります。 2. 次に、キーボードの Ctrl キーを動かさずに押し、必要に応じて右側のジョブを選択します。

win11 で alt+tab を使用してインターフェイスを切り替えることができません。原因は何ですか? Jan 02, 2024 am 08:35 AM

Win11 では、ユーザーが Alt+Tab ショートカットキーを使用してデスクトップ切り替えツールを起動できるようになりましたが、最近、友人が Win11 の Alt+Tab キーでインターフェイスを切り替えることができないという問題に遭遇しました。原因と解決方法がわかりません。 win11 の alt+tab でインターフェイスを切り替えることができないのはなぜですか? 回答: ショートカットキー機能が無効になっているため、解決策は次のとおりです: 1. まず、キーボードの「win+r」を押してファイル名を指定して実行を開きます。 2. 次に「regedit」と入力し、Enter キーを押してグループポリシーを開きます。 3. 次に、「HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer」と入力します。

PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする Dec 18, 2023 pm 03:39 PM

インターネット金融の急速な発展に伴い、株式投資を選択する人がますます増えています。株式取引では、ローソク足チャートは一般的に使用されるテクニカル分析手法であり、株価の変化傾向を示し、投資家がより正確な意思決定を行うのに役立ちます。この記事では、PHP と JS の開発スキルを紹介し、株価ローソク足チャートの描画方法を読者に理解してもらい、具体的なコード例を示します。 1. 株のローソク足チャートを理解する株のローソク足チャートの描き方を紹介する前に、まずローソク足チャートとは何かを理解する必要があります。ローソク足チャートは日本人が開発した

See all articles

JavaScriptを使用したタブラベル切り替え効果の説明

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック