利用Jquery特性根据左侧菜单栏点击展现右侧不同内容

最新推荐文章于 2023-11-11 09:40:24 发布

一渊之隔

最新推荐文章于 2023-11-11 09:40:24 发布

阅读量1.7k

点赞数 1

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_37263478/article/details/119891831

版权

本文介绍了如何使用Jquery简化页面开发，通过控制div的显示和隐藏，实现在左侧菜单栏点击时，右侧内容相应切换。默认样式设置高亮，点击左侧span元素时，通过JS代码改变背景图片并隐藏其他内容。

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

刚开始写一个页面需要完成这个需求的时候，我想的是用iframe来进行划分开发或者是写几个htm文件再分别引用不同的内容。询问了同事，发现我的方法比较复杂以此记录一下方便快捷的实现方法。直接通过JQuery控制div进行显示和隐藏不是更方便么，

首先，默认样式，此为高亮部分样式

        
.highlight {
    background-image: url(../images/hoverlog.png);
    background-color: #FFFFFF;
    width: 148px;
    color: #FFFFFF;
}

JS代码段

<div class="main">
    <div class="mainleft" style="margin-top: 20px;">
        <ul class="leftul" style="cursor: pointer;">
            <li> <span class="highlight">招标公告</span>
                
            </li>
            <li> <span>补充公告</span></li>
            <li><span>中