jq实现左右导航栏中间内容切换的效果

最新推荐文章于 2023-05-15 22:26:00 发布

遥望晨曦的梦

最新推荐文章于 2023-05-15 22:26:00 发布

阅读量306

点赞数

文章标签： html jquery

本文链接：https://blog.csdn.net/qq_54073865/article/details/127179857

版权

本文展示了如何使用jQuery实现一个左右导航栏与中间内容区域的切换效果。HTML结构包括左侧和右侧的导航列表，中间显示图片内容。CSS用于设置样式，jQuery代码隐藏所有图片并显示初始图片，当点击导航列表项时，相应内容会淡入显示，同时高亮选中导航项。

摘要由CSDN通过智能技术生成

效果图

HTML主要代码如下

<div class="box">
           <div class="left">
               <ul id="list">
                   <li class="lsy"><a href="#img1">新神榜：杨戬</a></li>
               <li><a href="#img2">还是觉得你最好</a></li>
                   <li><a href="#img3">山海经之再见怪兽</a></li>
                   <li><a href="#img4">神探大战</a></li>
                   <li><a href="#img5">勇士连</a></li>
                   <li><a href="#img6">我要和你在一起</a></li>
                   <li><a href="#img7">人生大事</a></li>
                   <li><a href="#img8">我世界里的你</a></li>
                   <li><a href="#img9">你的婚礼</a></li>
               </ul>
           </div>
           <div class="img">
               <ul>
                   <li id="img1" class="image"style="display: block;">
                       <img src="img/1.jpg" width="398px"height="478px">
                       </li>
                   <li id="img2" class="image"style="display: block;">
                       <img src="img/2.jpg"width="398px"height="478px">
                       </li>
                   <li id="img3"class="image"style=&#