JQ製のタブバー

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
  <メタ文字コード= "UTF-8"> 
  <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> 
  <メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> 
  <タイトル>ドキュメント</ TITLE> 
  <スタイル> 
  * {マージン：0;パディング：0 ;} 
  UL {リスト - スタイル：なし。 } 
  ■は{ 
    幅：1000px;高さ：475px;マージン：100pxに自動。
  } 
  .TAB { 
    ボーダー：1ピクセル固体RGBA（ 205、211、211、0.87 ）。高さ：36px;幅：320ピクセル; 
  } 
  。タブ- 項目{ 
    幅：80px;高さ：34px; フロート：左;ライン-高さ：34px; 
    テキスト -align：センター; BORDER- トップ：3px白色の固体;
    / * 3px是为了去掉和ホバー状态下3pxborderトップ的变化过程* / 
  } 
  スパン{ 
    パディング -left：5pxの。色：RGBA（205、211、211、0.87 ）。
  } 
  .TAB -item：ホバー{BORDER- トップ：赤色固体3px;} 
  .active {ボーダー - トップ：赤色固体3px;} 
  .products {ボーダー：1ピクセル固体RGBA（ 205、211、211、0.87 ）;} 
  .products .main {表示：なし;} 
  .selected .products {表示：ブロック;}
   </スタイル> 
</ head> 
<body> 
<DIV CLASS = "ボックス"> 
    <ULクラス= "タブ">
        <LIクラス= "タブ項目アクティブ">国际大牌の<span> | </ span>を</ LI> 
        <LIクラス= "タブの項目">国妆名牌の<span> | </ span>を</ LI> 
        <LIクラス= "タブの項目">清洁用品の<span> | </ span>を</ LI> 
        <LIクラス= "タブの項目">男士精品ます。</ li> 
    </ ulの> 

    の<divクラス= "製品"> 
        <DIV CLASS ="メイン選択"> 
            <a href="###"> <IMG SRC ="画像/ guojidapai.jpg」ALT = "" /> </a>の
          </ div> 
          <DIV CLASS = "メイン"> 
            <a href="###"> <IMG SRC = "画像/ guozhuangmingpin.jpg" ALT = ""/> </a>の
          </ div> 
          <divのクラス= "メイン"> 
            <a href="###"> <IMG SRC = "画像/ qingjieyongpin.jpg" ALT = "" /> </a>の
          < / DIV> 
          <DIV CLASS = "メイン">
            href = "###"> <aの<IMG SRC = "Images / nanshijingpin.jpg" Altキー= "" /> </a>の
    </ div> 
</ div> 
</ div> 

  <SCRIPT SRC =「HTTPS： //cdn.bootcss.com/jquery/3.4.1/jquery.js "> </ SCRIPT> 
  <SCRIPT> 
    $（関数（）{ 
      $（ "李「）のMouseEnter（関数（）{ 
        $（この）。 addClass（「アクティブ」）; 
        $（この .siblings（）removeClass（「アクティブ」））;
         // 李登録されたイベントに、これはアクティブ追加し、同時にアクティブの他の近隣の兄弟削除
        するvar IDX = $（これを）.INDEX （）;// 現在のインデックスは、IDXに置かれています
        （ "主"）$ EQ（IDX）.addClass（ "選択"）SIBLINGS（）removeClass（ "選択された。" ）;
         // .main選択された現在のインデックスに加え、他の削除が選択
      }）; 
    }）;
   </ SCRIPT> 

</ BODY> 
</ HTML>
おすすめ
