移动下划线导航（magicline navigation）

移动下划线导航(magicline navigation)

效果：当鼠标移到相对应的导航上时，导航栏下面的下划线也会移到相应的位置；当点击相应的导航时，会展现出不同的内容。

实现：html+css+jQuery

思路：写好布局，下划线的内容的展示区域为绝对定位。下划线默认位置为导航的第一项，当鼠标移到相应的导航上时，改变下划线的定位值，当鼠标点击相应的导航项时，通过改变每个导航项对应内容区域的z-index值，让当前被选中的内容显示在页面上。

代码
html：

        <nav>            <ul class="magicline clearfix">                <li class="nav-1">                    <a href="#">Navigation 1</a>                </li>                <li class="nav-2">                    <a href="#">Navigation 2</a>                </li>                <li class="nav-3">                    <a href="#">Navigation 3</a>                </li>                <li class="nav-4">                    <a href="#">Navigation 4</a>                </li>                <li class="slidestoke"></li>            </ul>            <div class="show-area">                <div id="show-area-1">                    <img src="image/images.jpg"/>                </div>                <div id="show-area-2">                    <img src="image/1.jpg"/>                </div>                <div id="show-area-3">                    <img src="image/下载 (1).jpg"/>                </div>                <div id="show-area-4">                    <img src="image/下载.jpg"/>                </div>            </div>        </nav>

css：

*{                padding: 0;                margin: 0;            }            a{                text-decoration: none;            }            nav{                margin: 50px;                position: relative;            }            .clearfix:before,            .clearfix:after{                display:table;                content:"";            }            .clearfix:after{                clear:both;            }            .clearfix{                *zoom:1            }             .magicline{            }            .magicline li{                list-style: none;                float: left;                width: 180px;                height: 35px;                line-height: 35px;                text-align: center;                background: lightblue;            }            .magicline .slidestoke{                position: absolute;                width: 180px;                height: 5px;                background: lightcoral;                margin-top: 2px;                top: 35px;                left: 0;            }            .nav-1:hover,            .nav-2:hover,            .nav-3:hover,            .nav-4:hover{                font-weight: bold;            }            .nav-1:hover~.slidestoke{                left: 0;            }            .nav-2:hover~.slidestoke{                left: 180px;            }            .nav-3:hover~.slidestoke{                left: 360px;            }            .nav-4:hover~.slidestoke{                left: 540px;            }            .show-area{                position: relative;            }            .show-area div{                width: 720px;                height: 400px;                background: lightblue;                position: absolute;                top: 5px;                left: 0;                z-index: 1;            }

jQuery：

$(document).ready(function(){                $('.nav-1').click(function(){                    $('.show-area div').each(function(){                        $(this).css('z-index',1);                    })                    $('#show-area-1').css('z-index',999);                });                $('.nav-2').click(function(){                    $('.show-area div').each(function(){                        $(this).css('z-index',1);                    })                    $('#show-area-2').css('z-index',999);                });                $('.nav-3').click(function(){                    $('.show-area div').each(function(){                        $(this).css('z-index',1);                    })                    $('#show-area-3').css('z-index',999);                });                $('.nav-4').click(function(){                    $('.show-area div').each(function(){                        $(this).css('z-index',1);                    })                    $('#show-area-4').css('z-index',999);                });            })