コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > Juery Web タブで code_jquery を実装する

Juery Web タブで code_jquery を実装する

WBOY
リリース： 2016-05-16 18:06:06
オリジナル
1017 人が閲覧しました

まず、フロントエンド コード

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

< ;div class="tab">

  • 個人情報
    • >
  • マイフォト

  • 私のブログ
    ;/div>

    ;/ div>


    >< ;/div> 🎜> コードは次のとおりです:


    $(function() {
    //Web ページのタブの切り替え
    var $menu_li = $("div .tab_menu ul li");
    $menu_li.click(function(){
    $(this).addClass("selected") //現在強調表示されている
    .siblings().removeClass( "selected"); // 他のピアの強調表示を削除します

  • varindex = $menu_li.index( $(this) ); //
  • の子ノードのインデックスを検索します$("div.tab_box > div ") //インデックス N の DIV が表示されます .eq(index).show() .siblings().hide() }) })
    次に CCS スタイルを設定できます




    コードをコピーします


    コードは次のとおりです次のように:


    .clear {clear:both; height:0px; overflow:hidden;}
    .tab{ width:400px;}
    .tab_menu ul{padding:0px;margin:0px;}
    .tab_menu li{ list-style:none; float:left; 背景:#C2CEFE;
    パディング: 0px 8px; マージン-右:6px; ボーダー:#86B4CA 1px ソリッド;
    }
    .box{ 幅:400px; 高さ:200px; ボーダー:#A8C9D9;パディング:10px 8px; }
    .tab_menu ul li. selected{background:#dadada; カーソル:ポインタ; }
    • 関連ラベル：
    网页选项卡
    ソース：php.cn
    前の記事：Javascript シリーズのデータ​​型 string_javascript スキルに精通している 次の記事：JavaScriptを使いこなすシリーズ - Javascriptの基礎_Javascriptスキル
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    Web アプリケーションでバージョン情報を表示するためのベスト プラクティスは何ですか? Webアプリケーションを開発しています。 Web アプリケーションでバージョン情報を表示するためのベスト プラクティスは何ですか?私はセマンティック バージョニングを使用しており、...
    から 2024-04-06 19:13:16
    0
    2
    476
    Reactjsで複数のチェックボックスを選択する方法 複数のチェックボックスを選択したいオプションのリストがありますが、選択することができません。このコードの何が問題なのでしょうか?サンドボックスの URL
    から 2024-04-06 18:55:21
    0
    1
    396
    window.open() と data を使用して計算ドキュメントを開きます: スキーム 計算された HTML ドキュメントを生成するブラウザーで実行される Web ページがあり、それを新しいブラウザー タブで開きたいと考えています。シンプルで汚い方法は、これを行うこと...
    から 2024-04-06 15:06:34
    0
    1
    378
    Vueでルートプロパティを設定する方法はありますか? ページ内の特定のタブ this.$router.push({name:"AdminNotifications",params:{tab:"reques...
    から 2024-04-06 11:35:59
    0
    1
    456
    Gmail と XOAUTH2 を使用した PHPMailer: 現在のリフレッシュ トークンの有効期限が切れたときに、新しいリフレッシュ トークンを自動的に取得するにはどうすればよいですか? XOAUTH2 で Gmail を使用することに不安があります (PHPMailerWiki)、および GmailXOAUTH2 で PHPMailer を使用して電子メールを送信...
    から 2024-04-06 10:14:45
    0
    1
    373
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート