jquery实现右侧栏菜单选择操作

网络编程 发布日期：2024/10/5 浏览次数：1

正在浏览：jquery实现右侧栏菜单选择操作

本文实例分享了jquery实现右侧栏菜单选择的相关代码，供大家参考，具体内容如下

效果图：

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"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"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"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"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="/UploadFiles/2021-04-02/jquery-1.11.3.min.js">


以上就是本文的全部内容，希望对大家的学习有所帮助。
上一篇：百度地图给map添加右键菜单（判断是否为marker）
下一篇：jQuery实现TAB选项卡切换特效简单演示

一句话新闻

微软与英特尔等合作伙伴联合定义“AI PC”：键盘需配有Copilot物理按键
几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。