<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<style type="text/css">
.menu{background:#eee; border-bottom:1px solid #0f52a4;}
a{
display:inline-block;
width:100px;
height:36px;
line-height:36px;
text-align:center;
color: #0f52a4;
font-weight: bold;
text-decoration: none;
position:relative;
top:1px;
}
.current a{
background:#fff;
border-top:2px solid #0f52a4;
}
div div{
display:none;
border-bottom:1px solid #0f52a4;
}
</style>
<script type="text/javascript">
$(function(){
$('div div:first').show();
$('span').mouseenter(function(){
$('span').removeClass('current');
$(this).addClass('current');
$('div div').hide();
$('div div').eq($('span').index(this)).show();
});
});
</script>
</head>
<body>
<div class="menu">
<span class="current"><a href="#"> Morning news </a></span>
<span><a href="#"> Midday news </a></span>
<span><a href="#"> The evening news </a></span>
<span><a href="#"> Video news </a></span>
</div>
<div>
<div> Morning news </div>
<div> Midday news </div>
<div> The evening news </div>
<div> Video news </div>
</div>
</body>
</html>

Content reference :http://h-ui.net/Hui-4.5-tab.shtml

[html] More about tab effects

  1. Javascript Advanced —— summary --DOM Case study + Tab effects

    Intermittently put the MOOCS JavaScript I've finished the basic and advanced , I don't use it very much during this period, and I forget some of them , Next, start writing more effects , For practical application . Make a form , Show the class's student information . 1. When the mouse moves over different lines, the background color changes to a color value of ...

  2. Vue frame -06- Conditional statements v-if Achieve tab effect

    Vue frame -06- Conditional statements v-if Achieve tab effect This film is about Vue A conditional sentence in the middle of a sentence v-if The first small example is , adopt v-if=" Boolean value ", It is determined by the true or false Boolean value , Does an element show ...

  3. CSS3 And JS Simple implementation of tab effect ( Adapt to mobile terminal and pc End )

    Want to adapt the mobile terminal and pc End , There are several simple ways , I use the method of percentage distribution . *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...

  4. Examples of wechat applets : Realization tabs Tab effects

    Recently, wechat application number is in full swing , Hot , But you can also find out the search keywords , All kinds of websites are explained by official documents of wechat . Just in time for this craze , I've read the technical documents of the small program all over these days , Just write the case directly . Many components in wechat have been ...

  5. WPF Achieve tab effect (2)—— Dynamic addition AvalonDock tab

    original text :WPF Achieve tab effect (2)-- Dynamic addition AvalonDock tab brief introduction In the previous article , We use AvalonDock It implements something like this VS The tab of ( Or the browser tab ) effect . But we did it through xaml ...

  6. WPF Achieve tab effect (3)—— Custom dynamically added AvalonDock Tab content

    original text :WPF Achieve tab effect (3)-- Custom dynamically added AvalonDock Tab content brief introduction In the previous article , We did AvalonDock Dynamic addition of tabs , But for the contents of the tab , We didn't achieve ...

  7. WPF Achieve tab effect (1)—— Use AvalonDock

    original text :WPF Achieve tab effect (1)-- Use AvalonDock brief introduction A recent project of the company , Software adoption WPF Development , Need to implement something like VS The tab of ( Or the browser tab ) effect . After searching for a lot of information , I found that many colleagues recommended Ava ...

  8. use js and css Achieve tab effect +jq(2019-10-09)

    1 design sketch : 2 Code : html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  9. ecshop Realization “ The high-quality goods 、 New product 、 Sell like hot cakes ” How to create a tabbed effect

    Recently, I have become an online mall , Use it directly ecshop Free templates for , Too lazy to do it again ,ecshop The station has been built for many days , I always want to create a web page tab in the home page. The mouse will switch automatically , Baidu search in this area did not find the right content , Today's experiment , succeed , the ...

  10. ordinary jquery Tab effects

    html part <ul class="tab"> <li> newest </li> <li class="cur"> hot &l ...

Random recommendation

  1. Jquery Form validation

    . Add a reference to the code ( Must quote ) <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript&quo ...

  2. VIM The posture of

    http://blog.csdn.net/vincent_czz/article/details/7900670 http://bbs.feng.com/read-htm-tid-7435912.ht ...

  3. my ZJ How to solve the problem

    If you want to learn programming well, the first thing is to develop your programming thinking , That is, your concept and thinking pattern of programming , Long term problem-solving will make you have a problem-solving experience, and then form a thinking pattern , For example, when you see a problem, you immediately figure out how to solve it . Programming thinking, I think, also includes ...

  4. php Interview question three ——PHP Network programming ( Advanced part )

    3、 ... and .PHP Network programming [!!!]1. Ban COOKIE after SEESION Can it still work ?(51.com Pen test ) Sure ,COOKIE and SESSION Are used to implement the session mechanism , because http Protocol is stateless , So if you want to follow one ...

  5. [ES4 Encapsulation tutorial ]3. Use Easy Sysprep v4 encapsulation Windows 7

    ( One ) Install and back up the system 1. install Windows 7 A lot of people would say , install Win7 Who wouldn't , That's fair to say ? loading Win7 It's true that everyone can , But how to install is the most suitable for system encapsulation , It's not necessarily everyone . Installation is the foundation of encapsulation , No good Ann ...

  6. Centos 6.5 install python3.5.1

    see python Version of #python  -V Python 2.6.6 1. download Python-3.5.1 #wget https://www.python.org/ftp/python/3.5.1/ ...

  7. Linux The general bidirectional circular list in kernel

    Contact in development Linux More and more , Rest and relax , You can't help looking at the mysterious Linux The kernel of . When you see a double linked list , I think it's interesting , This article records . As one of many basic data structures , Two way circular list in a variety of “ textbook ” The implementation in is quite ...

  8. reflact in GetMethod Use of methods

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...

  9. stay birt Solve the problem of referencing non-existent binding in

    stay birt This is a common mistake in English ,xxx Reference to a non-existent binding . When you select the entire table , Then you can see the bound fields in the binding next to the Attribute Editor below . You can delete what you don't need . You can also edit . I want to add conditions to the data . You can select data ...

  10. Singleton mode and static variables in PHP in

    stay PHP in , There are no static variables in a universal sense . And Java.C++ Different ,PHP The life cycle of the static variable in is just every time PHP The conversation cycle of , So it's doomed that there won't be Java perhaps C++ That kind of static variable . 1. Static variables are in PHP in stay PH ...