jquery 탭 효과 초보자 code_jquery-JS 튜토리얼-php.cn

jquery 탭 효과 초보자 code_jquery

WBOY

풀어 주다： 2016-05-16 18:05:16

원래의

1230명이 탐색했습니다.

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를 찾아 li의 name 값을 표시할 div에 할당합니다. <BR> }) <br><br>}) <BR></div> <BR>html 코드<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"> <BR><!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:inline; z-index:100;} <br>.hidde{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 { 커서:포인터; 디스플레이: 블록; 높이: 38px; 목록 스타일 유형: 없음; 부동: 왼쪽; 여백: 0px; 패딩: 0px; 너비: 132px;줄 높이: 38px; <br>텍스트 정렬: 센터;글꼴 크기: 18px;글꼴-가족: "黑体";배경 이미지: url(../images/0123_2.jpg);배경-반복 : 반복-y; } <br><br>#qq_1 .qq_1_2 { 부동: 왼쪽; 높이: 280px; 너비: 100%; 테두리: 1px 솔리드 #CCCCCC;패딩-상단: 12px;글꼴 크기: 13px;패딩 -오른쪽: 0% ; <br>여백-왼쪽: 0%; 패딩-하단: 1px;} <br><br></style><br><script 언어="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 콘텐츠를

 요소로 묶습니다: <br>$("#tab_bx"). children ("div").removeClass("show").addClass("hidde");");//id가 tab_bx가 아닌 div를 찾아서 제거하고 표시하고 숨깁니다 <br>$("# div" $(this).attr("name")).addClass("show");//div를 찾아 li에 있는 name 값을 표시할 div에 할당 <br>alert("#div" $(this).attr("name ")); <br>}) <br></script><br><title>
<br><br></head> <br><br><body> <br><div id="qq_1_1"> <br><li name="1"> 🎜><pre class="brush:php;toolbar:false"> QQ 코인 충전

QQ 코인 페이지

id="div2" class="hidde">게임 페이지