ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryは右列メニュー選択を実装します。operation_javascriptスキル

jqueryは右列メニュー選択を実装します。operation_javascriptスキル

WBOY
WBOYオリジナル
2016-05-16 15:12:081420ブラウズ

この記事の例では、右側のサイドバーに jquery メニュー選択を実装するための関連コードを共有しています。具体的な内容は次のとおりです。

レンダリング:

実装メニュー:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>右侧栏菜单</title>
  <style type="text/css">
      *{
      margin: 0;
      padding: 0;
      }
      .wrap{
      width: 500px;
      }
      .block{
       border:1px solid #ccc;
       margin: 20px 20px;
      }
      .rightMenu{
       position: fixed;
       right: 50px;
       top: 200px;
       /*opacity: 0;*/
       display: none;
      }
      .rightMenu li{
        list-style: none;
        display: block;
        width: 80px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border: 1px solid blue;
        margin: 5px 0px;
 
      }
      .rightMenu li a{
        text-decoration: none;
        color: black;
 
      }
  </style>
</head>
<body>
   <div class="wrap">
     <div class="block block1">
        <h4>第一部分</h4>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem&#63;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem&#63;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem&#63;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem&#63;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem&#63;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
        </p>
     </div>
     <div class="block block2">
        <h4>第二部分</h4>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem&#63;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem&#63;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem&#63;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem&#63;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem&#63;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem&#63;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
        </p>
     </div>
     <div class="block block3">
        <h4>第三部分</h4>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem&#63;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem&#63;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem&#63;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem&#63;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem&#63;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem&#63;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
        </p>
     </div>
     <div class="block block4">
        <h4>第四部分</h4>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem&#63;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem&#63;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem&#63;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem&#63;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem&#63;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem&#63;
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
        </p>
     </div>
      
   </div>
   <ul class="rightMenu">
          <li><a href="###">第一部分</a></li>
          <li><a href="###">第二部分</a></li>
          <li><a href="###">第三部分</a></li>
          <li><a href="###">第四部分</a></li>
     </ul>
   <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
   <script type="text/javascript">
    $(function(){
       $(".rightMenu").on("click","li",function(){
         // alert($(this).index())
         var index = $(this).index();
         console.log(index);
         var t = $(".wrap .block").eq(index).offset().top
         $("html body").animate({
           scrollTop:t
         })
       })
       var h = $(".rightMenu").height();
      $(window).scroll(function(){
         if($(document).scrollTop()<200){
          // alert("kk");
          $(".rightMenu").stop().animate({
             height:0,
               opacity: 0
               
          },1000)
         }
         else{
          $(".rightMenu").show().stop().animate({
               height:h,
               opacity: 1
               
          },1000)
         }
      })
       
       
    })
   </script>
</body>
</html>

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。