<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>JS slide </title>
<style>
*{padding:0;margin:0;}
.tagBox{border:1px solid #ddd; margin:50px auto;width:700px;height:239px}
.tagNav {height:30px; border-bottom:1px solid #ddd; background:#f5f5f5;}
.tagNav li {float:left;height:30px; line-height:30px; list-style:none; padding:0 15px;}
.tagNav li.curTag { background:#fff; margin-bottom:-1px; position: relative; height:31px; border-left:1px solid #ddd; border-right:1px solid #ddd;}
.tagNav li:first-child.curTag{ border-left:none}
.tagCon { padding:10px;}
.tagCon div{ display:none}
.tagCon div.curTag {display: block}
</style>
</head>
<body>

<div class="tagBox">
<div class="tagNav" id="one">
<ul>
<li class="curTag" id="one1" onMouseMove="showTag('one',1)">A</li>
<li id="one2" onMouseMove="showTag('one',2)">B</li>
<li id="one3" onMouseOver="showTag('one',3)">C</li>
<li id="one4" onMouseOver="showTag('one',4)">D</li>
<li id="one5" onMouseOver="showTag('one',5)">E</li>
<li id="one6" onMouseOver="showTag('one',6)">E</li>
</ul>
</div>
<div class="tagCon">
<div class="curTag" id="oneCon1">AAA</div>
<div id="oneCon2">BBB</div>
<div id="oneCon3">CCC</div>
<div id="oneCon4">DDD</div>
<div id="oneCon5">EEE</div>
<div id="oneCon6">FFF</div>
</div>
</div>

<script>
function showTag(name,cur){
var n=document.getElementById(name).getElementsByTagName("li").length; //li According to the above tagNav Medium tag To change
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById(name+"Con"+i);
menu.className=i==cur?"curTag":""; 
con.style.display=i==cur?"block":"none";
}}
</script>
</body>
</html>

//curTag Used to control style for example  .tagNav li.curTag { background: url(1.jpg) no-repeat; margin-bottom:-1px; position: relative; height:31px; border-left:1px solid #ddd; border-right:1px solid #ddd;}   It can be defined that the mouse is the background of the display , Font style, etc .

.tagNav li.curTag a{color: #fff;} You can set the font to be white when the mouse is on it .

JS Slide more related articles

  1. iSlider Mobile platform JS Sliding components

    iSlider Mobile platform JS Sliding components , No plug-in dependencies . It can handle any element , For example, pictures or DOM Elements . It has the following characteristics : Be able to customize animation , Your own animations include default, rotate, flip and depth you ...

  2. appium java slide (js Slide and swipe slide )

    There is a page with a lot of content recently , Some elements need to slide to the bottom to see , So let's look at sliding , Here are two ways I learned to slide One : use js slide use js The idea of sliding is very simple , The first is to locate this element first , After positioning, do nothing , however ...

  3. Swipe JS Slide plug in

    Swipe JS It's a lightweight mobile sliding component , Support 1:1 The touch of moving , Good resistance and skid resistance , You can move web Applications show more content , Can solve our problem of mobile Web The need for sliding . Official website :http://www. ...

  4. js The realization of sliding door

    principle : Sliding door , Here is an example of the picture , First set the main box div Width and height settings for , And set the image initialization position , Then bind the image to the event , And set the effect to be achieved html Code : <!DOCTYPE html> ...

  5. JS Sliding underline navigation menu implementation principle

    The effect is as follows :http://campus.51job.com/test/zengxl/js html: <div class="mainnav"> <div clas ...

  6. js Slide prompt effect

    js Code Beautiful animation effect : In the upper right corner : The background color is red , The font color is white   slide Bigger Move upward   Slowly fade away function tishi() { $("#tishi").attr(&q ...

  7. ionic js Slide box ion-slide-box A slider is a component that contains a multi page container , Slide or drag each page to switch

    ionic Slide box ion-slide-box A slider is a component that contains a multi page container , Slide or drag each page to switch : The renderings are as follows : usage <ion-slide-box on-slide-changed=&quo ...

  8. [Js] Sliding door effect

    describe : Move the mouse over a picture , The full picture will be displayed , Other pictures show the general picture One . Motion without animation Ideas : 1. Set the initial position of each image ( The first one completely shows ,234 Only part of it is revealed ) 2. Calculate the movement distance of each door ( That is not ...

  9. JS Sliding door ,JQuery Sliding door

    <a href="#" id="one1" onmouseover="setTab('one',1,2)" class="h ...

Random recommendation

  1. 【 Reprint 】AB Analysis of test results

    AB test ,200 A request ,20 concurrent . This kind of test intensity ,CPU Account for the 70-80%,w3p Occupied 70 many M Memory , I wanted to do more tests , See if its memory goes up , no There's a test machine, there's no way , We need to work hard . I guess CPU There's a problem ...

  2. Detailed explanation Bootstrap Thumbnail components and warning box components

    Thumbnail component The most common use of thumbnails on a website is the product list page , A few pictures in a row , Some have a title at the bottom of the picture . Describe the content . Button and so on .bootstrap The framework separates this part into a module component , By class name .thumbnail coordination b ...

  3. Android-- hold PDA Read SD The file in the card

    In the past two years, there have been many Wince The equipment is turning Android operating system , Recently forced to use Android Development PDA Handheld devices . The main function is scan login , picking , packing , There are several functions . When it comes to commodity archives, there are probably 700 About commodities to ...

  4. Li Hongqiang iOS Development of OC[012] - Class implementation summary

    // //  main.m //  11 - Content summary // //  Created by vic fan on 16/7/9. //  Copyright 2016 year Li Hongqiang . All righ ...

  5. CCLabelTTF、CCLabelAtlas and CCLabelBMFont The difference between

    from :http://blog.sina.com.cn/s/blog_67a5e47201018tj8.html stay Cocos2d as well as Cocos2d-x in , We often use CCLabelTTF as well as CCLa ...

  6. turn :LayoutInflater Function and use

    effect : 1. For an interface that is not loaded or wants to be loaded dynamically , You need to use inflate To load . 2. For a loaded Activity, You can use it to implement this Activity Of course findViewById() ...

  7. Python A collection of usage of some methods

    1.range() Method : >>>range(5) [0, 1, 2, 3, 4] >>>a= ["heke","sdsdjs" ...

  8. Solve the problem that persistent data is too large , The hard disk of a single node cannot be stored ; The solution is too much computation , Memory of a single node 、CPU Problems that can't be dealt with

    There are a lot of techniques to learn , It is not easy to learn new knowledge by oneself , It's a good start to choose one you're more interested in , therefore , I'm going to learn about distributed systems . With questions , Study with a purpose , Let's look at the overall architecture first , In the depth of the details of interest , This is my plan ...

  9. vivo7.0 How does the above system not need Root Activate Xposed Framework approach

    In the drainage or business operation of more companies , Basically, we need to use Android's black hi tech technology Xposed frame , A few days ago, our company bought a new batch of vivo7.0 The above systems , It's basically based on 7.0 Above version , Basically can't get Root Of su Super authority ...

  10. Python selectors Realization socket Concurrent

    selectors modular This module allows you to build high-level and efficient I / O Multiplexing . Encourage users to use this module , Unless they want precise control over what they use os Level primitives . notes :selectors It's also packaged select high ...