jquery に基づいて独自のタブスライディングドアを作成する (ユニバーサルバージョン)

ホームページ

ウェブフロントエンド

jsチュートリアル

jquery に基づいて独自のタブスライディングドアを作成する (ユニバーサルバージョン)_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:48 PM

tab 引き戸

css:

复制代代码如下:

 
.main 
{ 
高さ:360ピクセル; 
幅:290ピクセル; 
ボーダー:1px ソリッド #444444; 
フォントサイズ:12px; 
カラー:#444444; 
マージン:20px; 
} 
.main_top 
{ 
高さ:30px; 
幅:290ピクセル; 
行の高さ:30px; 
text-align:left; 
背景色:#999999; 
border-bottom:1px ソリッド #444444; 
} 
.main_top ul 
{ 
padding:0px; 
マージン:0px; 
リストスタイルタイプ:なし; 
位置:絶対; 
} 
.main_top ul li.h_qian 
{ 
float:left; 
幅:80ピクセル; 
text-align:center; 
背景色:#999999; 
高さ:30px; 
} 
.main_top ul li.h_hou 
{ 
float:left; 
幅:80ピクセル; 
text-align:center; 
背景色:#ffffff; 
カーソル:ポインタ; 
マージントップ:1px; 
高さ:30px; 
フォントの太さ:太字; 
} 
.main_content 
{ 
margin:10px; 
} 

js:

复制代码代码如下:

 
function tabchange(obj,p,c,q,h) { 
$(obj).parent().find("li").attr("class", "" q ""); 
$(obj).parents("." p "").find("." c "").hide(); 
$(obj).attr("クラス", "" h ""); 
var j = $(obj).index(); 
$(obj).parents("." p "").find("." c ":eq(" j ")").show(); 
} 

html:

复制代代码如下:

第一模块

第二模块

第三模块

第 1 块

第 2 块

第 3 块

代コードは完全に、詳細は、デモ中のtangtab.js のコメントを参照してメソッドを使用します。 ://demo.jb51.net/js/2012/TabDemo/

打包下ダウンロード：
TabDemo_jb51.rar

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

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

7403

Java チュートリアル

1630

CakePHP チュートリアル

1358

Laravel チュートリアル

1268

PHP チュートリアル

1218

Related knowledge

CentOS7のTabキーでコマンドが完了できない問題を解決 Jan 17, 2024 pm 01:30 PM

今日、centOS で実験をしていたところ、Ubuntu で一般的に使用されていたタブキーによる補完方法が使用できないことがわかり、非常に興味があったので、情報を検索し、自分でテストした結果、考えられる解決策を次のように記録しました。まず、ターミナルで次のコマンドを実行する必要があります: #yuminstallbash-completion//ワイルドカードインストールを使用することもできます: yuminstallbash-c* または、いくつかの初期化パッケージグループ yum-ygroupinstallBaseCompatibilitylibrariesDebuggingToolsDial-upNetworkingsupppo をインストールすることもできます

Vue でタブコンポーネントとマルチタブページを実装するにはどうすればよいですか? Jun 25, 2023 am 09:33 AM

フロントエンドテクノロジの継続的な更新により、Vue は人気のあるフロントエンドフレームワークとして、多くの開発者の最初の選択肢になりました。実際のプロジェクトでは、さまざまな機能モジュールを切り替えて管理するために、タブコンポーネントやマルチタブページを使用する必要があることがよくあります。この記事では、Vueを使ってシンプルなタブコンポーネントとマルチタブページを実装する方法を紹介します。 1. 単純なタブコンポーネントの実装 Tab.vue コンポーネントの作成プロジェクト内に Tab.vue コンポーネントを作成して表示します。

Vue でタブを実装する 3 つの方法は何ですか? Jan 29, 2023 pm 02:49 PM

Vue でタブを実装するには 3 つの方法があります: 1. 「v-show」を介してタブコンテンツの切り替えを制御する; 2. Vue の is 機能と「キープアライブ」キャッシュを介してタブ切り替えを実装する; 3. 「router」を介してルート切り替えを実装する-リンク" 。

Alt+Tab でインターフェースを切り替えられないのはなぜですか? Mar 09, 2023 pm 02:11 PM

alt+tab でインターフェースを切り替えることができない理由は、このコマンドが無効になっているためです。解決策: 1. コンピューターの電源を入れ、スタートメニューをクリックし、ファイル名を指定して実行コマンドを選択します。2. 空白のバーに「regedit」と入力します。 3. レジストリマネージャーに入り、「AltTabSettings」オプションを見つけます。 4. 「AltTabSettings」をダブルクリックし、開いたオプションの値データを「00000001」に変更し、「確認」をクリックします。。