Home >Web Front-end >JS Tutorial >jquery tab effect novice code_jquery

jquery tab effect novice code_jquery

WBOY
WBOYOriginal
2016-05-16 18:05:161252browse

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




    Statement:
    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
    Previous article:Display problem of ComboBox column in Extjs EditorGridPanel_extjsNext article:Display problem of ComboBox column in Extjs EditorGridPanel_extjs

    Related articles

    See more