Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > Web Front-end > JS Tutorial > Implement code_jquery with Juery web tab

Implement code_jquery with Juery web tab

WBOY
Release： 2016-05-16 18:06:06
Original
1037 people have browsed it

First, the front-end code

Copy the code The code is as follows:



  • Personal information

  • My Photos

  • My Blog




My QQ:1511109272
hi

hello

< ;/div> 🎜> The code is as follows:

$(function() {
//Switching of web page tabs
var $menu_li = $("div.tab_menu ul li");
$menu_li.click(function(){ $(this).addClass("selected") //Current
  • highlighted.siblings().removeClass("selected"); // Remove the highlighting of other peers
  • var index = $menu_li.index( $(this) ); //Find the index of the child node of
  • $("div.tab_box > div ") //The DIV with index N is displayed .eq(index).show() .siblings().hide();
    • })
    })


    Then the CCS style can be set




    Copy the code


    The code is as follows:

    .clear { clear:both; height:0px; overflow:hidden;}
    .tab{ width:400px; font-size:12px;}
    .tab_menu ul{ padding:0px;margin:0px;}
    .tab_menu li{ list-style:none; display:block; float:left; background:#C2CEFE; height:22px; line-height:22px; padding: 0px 8px; margin-right:6px; border:#86B4CA 1px solid; } .box{ width:400px; height:200px; overflow:hidden; border:#A8C9D9 1px solid; padding:10px 8px; } .tab_menu ul li. selected{background:#dadada; cursor:pointer; } .hide{ display:none;}
    Related labels：
    网页选项卡
    source：php.cn
    Previous article：Proficient in Javascript series data types string_javascript skills Next article：Mastering Javascript Series - Javascript Basics_Javascript Skills
    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
    Latest Articles by Author
    Latest Issues
    What are the best practices for displaying version information in web applications? I'm developing a web application. What are the best practices for displaying version infor...
    From 2024-04-06 19:13:16
    0
    2
    476
    How to select multiple checkboxes in Reactjs I have a list of options in which I want to select multiple checkboxes but am unable to do...
    From 2024-04-06 18:55:21
    0
    1
    396
    Open calculation documents using window.open() and data: scheme I have a web page that runs in a browser that generates a calculated HTML document that I ...
    From 2024-04-06 15:06:34
    0
    1
    378
    Is there a way to set the route prop in vue? I want to navigate to a specific tab in the page this.$router.push({name:"AdminNotifi...
    From 2024-04-06 11:35:59
    0
    1
    456
    PHPMailer using gmail and XOAUTH2: How to automatically get a new refresh token when the current refresh token expires? I am concerned about using Gmail with XOAUTH2 (PHPMailerWiki) and How to send emails using...
    From 2024-04-06 10:14:45
    0
    1
    373
    Related Topics
    More>
    Popular Recommendations
    Popular Tutorials
    More>
    Related Tutorials
    Popular Recommendations
    Latest courses
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template

    Public welfare online PHP training，Help PHP learners grow quickly！

    About us Disclaimer Sitemap

    © php.cn All rights reserved