jquery uses only 6 lines of code to achieve the sliding door effect

jquery uses only 6 lines of code to achieve the sliding door effect_jquery

WBOY

Release： 2016-05-16 15:40:24

Original

1132 people have browsed it

The example in this article describes how jquery uses only 6 lines of code to achieve the sliding door effect. Share it with everyone for your reference. The details are as follows:

This is a sliding door navigation bar based on jQuery, with only 6 lines of code. I wonder if there is any less code than this. During the implementation of the sliding door, the background image is used to decorate each "door" The background is more beautiful and has an excellent user experience.

The operation effect is as shown below:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-simple-nav-menu-style-codes/

The specific code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 6行代码实现滑动门</title>
<style>
*{margin:0; padding:0;font-family:"宋体",Arial, Helvetica, sans-serif; font-size:12px}
.ts{ width:50%; margin:0 auto}
.ts .tsHead{clear:both; height:27px;background:url(images/titLine.gif) repeat-x left bottom; border-left:1px solid #88AAD6; border-right:1px solid #88AAD6; border-top:1px solid #88AAD6}
.ts .titLeft{float:left; height:27px;font-size:1px; width:12px;;background:url(images/titLeft.gif) no-repeat}
.ts .titOp{float:left; height:21px; padding:5px 0 0}
.ts .titOp li{ float:left; width:100px;height:15px; padding:5px 0 0; margin:0 0 0 3px;border:1px solid #88AAD6; border-bottom:1px solid #fff;background:#eeeeff; color:#999;text-align:center; cursor:default}
.ts .titOp li.current{ background:#fff;color:#290052; }
.ts .titRight{float:right; height:26px;font-size:1px; width:32px;;background:url(images/titRight.gif) no-repeat}
.ts .line{border-left:1px solid #88AAD6;border-right:1px solid #88AAD6;clear:both; height:13px; line-height:13px; padding:5px; background:#E9F9FE}
.ts .tsMb{border:1px solid #88AAD6; border-top:none; padding:10px; height:120px; min-height:100px; font-weight:bold}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script>
$(function(){
  $("#tsMb div:not(:first)").hide();
  $("#titOp li").each(function(index){
    $(this).mouseover(
     function(){
     $("#titOp li.current").removeClass("current");
     $(this).addClass("current");
     $("#tsMb > div:visible").hide();
     $("#tsMb div:eq(" + index + ")").show();
    })
  })
})
</script>
</head>
<body>
 <div style="clear:both; height:30px"></div>
 <!--调试层-->
 <div class="ts">
     <div class="tsHead">
         <div class="titLeft"></div>
         <div class="titOp" id="titOp">
          <ul>
             <li class="current">脚本调试器</li>
             <li>样式调试器</li>
             <li>DOM调试器</li>
            </ul>
         </div>
         <div class="titRight"></div>
     </div>
     <div class="line">sadfasdfsd</div>
     <div class="tsMb" id="tsMb">
       <div>脚本</div>
       <div>样式</div>
       <div>DOM</div>
     </div>
 </div>
 <!--调试层 end-->
</body>
</html>

Copy after login

I hope this article will be helpful to everyone’s jquery programming design.