jqueryタブ効果の初心者code_jquery-jsチュートリアル-php.cn

jqueryタブ効果の初心者code_jquery

WBOY

リリース： 2016-05-16 18:05:16

オリジナル

1250 人が閲覧しました

jquery コード

コードをコピーコードは次のとおりです。

$(function(){
/ /Tab
var $qqbind=$("#qq_1_1 ul li"); //背景色の変更を設定するために変更するタイトルを取得します
$qqbind.click(function(){
var ch =$qqbind.has("pre"); //pre タグでタイトルを検索します。pre は背景スタイルを設定します。
ch.html(ch.children("pre") .html ()); // pre タグを削除します
$(this).wrapInner("

"); //現在の $qqbind コンテンツを <br>$("#tab_bx").children("div").removeClass("show123").addClass("hide123"); //ID が tab_bx ではない div を見つけて削除して表示しますHide <BR>$("#div" $(this).attr("name")).addClass("show123"); // div を検索し、表示する div に li の name の値を代入します。 🎜> }); <BR><br>}) <br><BR> </div>HTML コード<BR><BR><div class="codetitle"><span><a style="CURSOR: pointer" data="73532" class="copybut" id="copybut73532" onclick="doCopy('code73532')">コードをコピー<U></U></a>コードは次のとおりです:</span></div> <div class="codebody" id="code73532"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head> <br><meta http -equiv="Content -Type" content="text/html; charset=utf-8" /> <br><style> <br>pre{margin: 0px;padding: 0px;background-color: #00CC33 ;高さ: 38px; 幅: 132px; 浮動小数点数: 左; 背景色: #C90} <br>.show{display:none} <br> #qq_1 { float: left;height: auto;width: 770px;} <br>#qq_1 #qq_1_1 {height: 38px;width: 100%;} <br>#qq_1_1 ul {margin: 0px;padding: 0px;float : 左;幅: 100%;} <br>#qq_1_1 li { カーソル:ポインター; 表示: ブロック;高さ: 38 ピクセル;リストスタイルタイプ: なし;フロート: 左;マージン: 0 ピクセル;パディング: 0 ピクセル;幅: 132px;line-height : 38px; <br>text-align: center;font-size: 18px;font-family: "黑体";background-image: url(../images/0123_2.jpg);background-repeat :repeat-y; } <br><br>#qq_1 .qq_1_2 { float: left;height: 280px;width: 100%;border: 1pxソリッド #CCCCCC;padding-top: 12px;font-size: 13px;padding -right: 0% ; <br>padding-left: 0%; } <br><br></style> <br><script language="javascript" type="text/ javascript" src=" JS/jquery-1.4.2.js"></script> <br><script> <br>$(document).ready(function(){ <br>var $qqbind= $("#qq_1_1 ul li"); //背景色の変更を設定するために変更するタイトルを取得します<br>$qqbind.click(function(){ <br>var ch=$qqbind.has(" pre");//pre タグが付いたタイトルを見つけます。pre は背景スタイルを設定します。 <br>ch.html(ch.children("pre").html()) を使用します。 //pre タグを削除します<br>$(this).wrapInner("<pre class="brush:php;toolbar:false">"); // 現在の $qqbind コンテンツを
$("#tab_bx") で囲みます。 Children ("div").removeClass("show").addClass("hidde");");//ID が tab_bx ではない div を見つけて削除し、表示して非表示にします
$("# div" $(this).attr("name")).addClass("show");//div を検索し、表示する div に li の name の値を代入します
alert("#div" $(this).attr("name "));

>

/pre> 
 >

QQ コインページ

ゲームページ