ホームページ > 記事 > ウェブフロントエンド > js、cssタグ内容切り替え機能実装チュートリアル

js、cssタグ内容切り替え機能実装チュートリアル

小云云オリジナル: 2018-01-27 11:18:451349ブラウズ

この記事では、主にラベルコンテンツ切り替え機能を実現するためのjs + cssを共有します（例付きで説明）。最初にレンダリングを添付し、コード例を示して説明します。これは、あなたの助けになることを願っています。

まずレンダリングとコードを添付します:

html ドキュメント:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script type="text/javascript" src="../js/tabs_function.js"></script>
 <script type="text/javascript">
  window.onload = function main() {
   Tabs(".list-item", ".contents", "list-item-checked", "contents-checked");

  }
 </script>
 <style type="text/css">
  #list-title {
   width: 318px;
   height: 56px;
   margin: 0;
   list-style-type: none;
   padding-left: 0;
  }

  .list-item {
   float: left;
   width: 100px;
   height: 50px;
   margin: 2px;
   line-height: 50px;
   font-size: 28px;
   text-align: center;
   border: 1px solid #000;
   cursor: pointer;
  }

  .list-item-checked {
   background-color: #70adff;
   color: #ffffff;
  }

  #content-box {
   position: relative;
   clear: both;
   width: 314px;
   height: 302px;
   margin: 0 2px;
  }

  .contents {
   position: absolute;
   left: 0;
   top: 0;
   width: 312px;
   height: 300px;
   margin: 0;
   font-size: 32px;
   line-height: 300px;
   text-align: center;
   border: 1px solid #000;
   z-index: 0;
   opacity: 0;
   visibility: hidden;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;
  }

  .contents-checked {
   z-index: 1;
   opacity: 1;
   visibility: visible;
  }
 </style>
</head>
<body>
<ul id="list-title">
 <li class="list-item list-item-checked">1</li>
 <li class="list-item">2</li>
 <li class="list-item">3</li>
</ul>
<p id="content-box">
 <p class="contents contents-checked" style="background-color: #c8ff40;">content_1</p>
 <p class="contents" style="background-color: #41ff6f;">content_2</p>
 <p class="contents" style="background-color: #ff82a0;">content_3</p>
</p>
</body>
</html>

js ファイル:

/**
 * Created by Administrator on 2016/9/12.
 */

/*
 * tabs_name:用于触发事件的标签的类名；
 * contents_name:内容容器的类名；
 * tabs_checked_style:标签为选中状态时的样式；
 * contents_checked_style:内容容器为选中状态时的样式；
 *
 * classList.toggle();
 * 检查元素的类名列表中是否有指定的类名，如果有则移除，如果没有则添加；
 * */
function Tabs(tabs_name, contents_name, tabs_checked_style, contents_checked_style) {
 var tabs = document.querySelectorAll(tabs_name),
  contents = document.querySelectorAll(contents_name),
  e_mark = 0;
 for (var i = 0, len = tabs.length; i < len; i++) {
  tabs[i].num = i;
  tabs[i].onclick = function () {
   tabs[e_mark].classList.toggle(tabs_checked_style);
   tabs[this.num].classList.toggle(tabs_checked_style);
   contents[e_mark].classList.toggle(contents_checked_style);
   contents[this.num].classList.toggle(contents_checked_style);
   e_mark = this.num;
  };
 }
}

原理と仕組み

CSSのクラスのオーバーレイ効果について。

複数のクラス名を要素に追加でき、複数のクラスのスタイルがカスケードされて同時に表示されることがわかっています。

例:

.list-item {
   float: left;
   width: 100px;
   height: 50px;
   margin: 2px;
   line-height: 50px;
   font-size: 28px;
   text-align: center;
   border: 1px solid #000;
   cursor: pointer;
  }

  .list-item-checked {
   background-color: #70adff;
   color: #ffffff;
  }

最初の li の class 属性には、.list-item と .list-item-checked という 2 つのクラス名があることがわかります。この li 要素は、これら 2 つのクラスのスタイルを同時に持つことになります。

比較すると、2 番目と 3 番目の li クラスには、.list-item のみがあります。したがって、.list-item-checked で設定されたスタイルはありません。

トピックに戻り、ラベルを切り替え、実際に要素を取得して、要素のスタイルを変更します。次に、要素のスタイルを「classList」で制御して要素のクラス名を制御し、スタイルを変更できます。

classList メソッドの簡単な紹介。

1. element.classList は要素のクラス名のリストを取得するだけです。

2. element.clasList.add(value); このメソッドは、指定されたクラス名を要素のクラス名リストに追加します。

3. このメソッドは、指定されたクラスを削除します。要素のクラス名リストから名前を削除します。

4. element.classList.contains(value); このメソッドは、指定されたクラス名が要素のクラス名リストに存在するかどうかを判断します。ブール値

5. element.classList .toggle(value); このメソッドは、指定されたクラス名が要素のクラス名リストに存在するかどうかを判断し、存在しない場合はクラス名を追加します。クラス名のうち、「value」の値は変数または文字列定数にすることができます

 element.classList.add("class-name"); // 字符串
 element.classList.add(class_name); // 变量
 
 element.classList.remove(class_name);
 element.classList.contains(class_name); // true,false
 element.classList.toggle(class_name); // 有则删，无则添；

1。

e_mark = 0;
 for (var i = 0, len = tabs.length; i < len; i++) {
  tabs[i].num = i;
  tabs[i].onclick = function () {
   tabs[e_mark].classList.toggle(tabs_checked_style);
   tabs[this.num].classList.toggle(tabs_checked_style);
   contents[e_mark].classList.toggle(contents_checked_style);
   contents[this.num].classList.toggle(contents_checked_style);
   e_mark = this.num;
  };
 }

初期の「e_mark」の値は「0」です。「e_mark」は現在選択されている番号「0」の要素を指していることを示します。 2. "tabs[i].num=i" の役割:

e_mark = 0;

上の for ループでは、実際には "i" の値は、「tabs」配列標準値。「onclick」などのイベントの匿名関数では「i」の値を直接取得できないためです。つまり、各要素がこの関数をトリガーする可能性があるため、要素がクリックされたとき、トリガーされた関数は「tabs」配列内のどの要素がクリックされたかを知ることができません。ただし、関数は「this」を使用して、どの要素がクリックされたかを知ることができます。クリックされた要素の番号は、クリックされた要素のカスタム値を通じて取得できます。要素をクリックする前に、まずこれらの要素に数値をバインドします: num (カスタム値)。その後、「this.num」を通じてこの要素の番号を取得できます。また、この要素が「tabs」配列内のどの要素であるかもわかります。

3. 現在の要素と更新された要素のスタイルを変更します:

tabs[i].num = i;

前述のように、「e_mark」は現在の要素の番号であり、「this.num」はクリックされた要素です。と新しく選択された要素番号。したがって、要素をクリックしたら、次の 2 つのことを行う必要があります: 1. 現在選択されている要素のスタイルを通常のスタイルに戻す、2. クリックされた要素のスタイルを選択時のスタイルに変更する。 classList メソッドと組み合わせると、.list-item-checked は選択されたときに追加されるスタイルであることがわかります。選択された要素はこのクラス名を追加するだけで済みますが、選択されていない要素はこのクラス名を削除します。

js、cssタグ内容切り替え機能実装チュートリアル

関連記事