jQueryはスライディングタブを実装する

この記事では、スライドタブを実装するためのjQueryの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

まず最終的な効果:

需要分析:

1. タブメニューの数が固定されておらず、メニューの内容も固定されていないため、個々のメニューの幅と全体の幅が不明になります。
2. 最初の要件により、スライダーの幅が固定されなくなります
3. インタラクションを良くするために、スライダーにトランジションアニメーションを追加する必要があります。

スライダーが必要なのは、スライダーとメニューの HTML 構造を分離する必要があり、jQuery の offset メソッドを使用して位置を取得および設定し、すべての div で相対的な配置を使用する必要があることを意味します。

この場合の TAB タブは簡単に拡張して再利用できます。直接使用するには、いくつかの値を変更するだけです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>0908</title>
    <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
    <スタイル>
        /*コンテナは水平方向の中央揃えのためだけのものです。必要ない場合は、このネスト層を削除できます*/
        。容器{
            左: 50%;
            上マージン: 100px;
            フロート: 左;
            カーソル:ポインタ;
            位置: 相対的;
        }
        .BG{
            右: 50%;
            フォントサイズ: 0;
            背景色: #f2f2f2;
            境界線の半径: 30px;
            位置: 相対的;
        }
        .コンテナdiv{
            フォントサイズ: 16px;
            行の高さ: 60px;
        }
        。リスト{
            フロート: 左;
            表示: インラインブロック;
            パディング: 0 50px;
            遷移: カラー 0.5 秒;
            位置: 相対的;
            zインデックス: 1;
        }

        /*listH と listA の順序はここでは変更できません。優先順位があり、listA が使用されている場合、listH は機能しません*/
        .listH{
            色: #ff8300;
        }
        .listA{
            色: #fff;
        }

        /*スライダー*/
        ＃アクティブ{
            幅: 100ピクセル;
            高さ: 60px;
            境界線の半径: 30px;
            背景色: #ff8300;
            ボックスの影: 0 5px 16px 0 rgba(255, 144, 0, 0.58);
            位置: 相対的;
            zインデックス: 0;
            遷移: 左 0.5 秒、幅 1 秒。
        }
    </スタイル>
    <スクリプト>
        $(ドキュメント).ready(関数() {

            /*デフォルトのアクティブタブ eq(i) を設定する*/
            var aL = $(".list:eq(1)");
            $("#active").width(aL.innerWidth());
            $("#active").offset(aL.offset());
            aL.addClass("リストA");

            /*各ボタンにクリックイベントを追加する*/
            $(".list").click(関数() {
                $("#active").width($(this).innerWidth()); //幅を設定$("#active").offset($(this).offset()); //位置を設定$(this).addClass("listA");
                $(".list").not(this).removeClass("listA");
            });

            /*ホバー効果*/
            $(".list").hover(関数() {
                $(this).addClass("listH")
            }、関数 （） {
                $(this).removeClass("listH")
            })

        });
    </スクリプト>
</head>
<本文>
<div class="コンテナ">
    <div class="BG">
        <div class="list">1</div>
        <div class="list">22</div>
        <div class="list">3333</div>
        <div class="list">4</div>
        <div class="list">ファイブファイブファイブ</div>
        <div id="アクティブ"></div>
    </div>
</div>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: