Home > Web Front-end > JS Tutorial > body text

jquery tab effect novice code_jquery

WBOY
Release: 2016-05-16 18:05:16
Original
1230 people have browsed it

jquery code

Copy code The code is as follows:

$(function(){
/ /Tab
var $qqbind=$("#qq_1_1 ul li"); //Get the title to be changed in order to set its background color change
$qqbind.click(function(){
var ch =$qqbind.has("pre"); //Find the title with the pre tag; pre is to set her background style. Use
ch.html(ch.children("pre").html ()); //Remove the pre tag
$(this).wrapInner("
"); //Wrap the current $qqbind content with <br>$("#tab_bx").children("div").removeClass("show123").addClass("hide123"); //Find the div whose id is not tab_bx, remove and display it Hide <BR>$("#div" $(this).attr("name")).addClass("show123"); //Find the div and assign the value of name in li to the div to be displayed <BR> }); <br><br>}) <BR></div> <BR>html code<BR><div class="codetitle"><span><a style="CURSOR: pointer" data="73532" class="copybut" id="copybut73532" onclick="doCopy('code73532')"><U>Copy code</U></a></span> The code is as follows :</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;height: 38px; width: 132px; float: left; background-color: #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: left;width: 100%;} <br>#qq_1_1 li { cursor:pointer; display: block;height: 38px;list-style-type: none;float: left;margin: 0px;padding: 0px;width: 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 solid #CCCCCC;padding-top: 12px;font-size: 13px;padding-right: 0% ; <br>padding-left: 0%; padding-bottom: 1px;} <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"); //Get the title to be changed in order to set its background color change<br>$qqbind.click(function(){ <br>var ch=$qqbind.has("pre");//Find it Title with the pre tag; pre is to set her background style. Use <br>ch.html(ch.children("pre").html()); //Remove the pre tag<br>$(this).wrapInner("<pre class="brush:php;toolbar:false">"); // Surround the current $qqbind content with the 
 element: <br>$("#tab_bx").children ("div").removeClass("show").addClass("hidde");");//Find the div whose id is not tab_bx, remove it, show it and hide it <br>$("#div" $(this). attr("name")).addClass("show");//Find the div and assign the value of name in li to the div to be displayed <br>alert("#div" $(this).attr("name ")); <br>}); <br>}); <br></script> <br><title>Test</title> <br><br></head> <br><br><body> <br><div id="qq_1_1"> <br><ul> <br><li name="1"> <br><pre class="brush:php;toolbar:false"> QQ Coin Recharge


  • Monthly service




  • QQ coin page

    Game page




    Related labels:
    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Recommendations
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template