HTML左右分页更新【搬代码】

已于 2024-08-12 17:07:04 修改
阅读量1k 收藏 22
点赞数 16
文章标签： html javascript 前端
于 2024-08-12 16:37:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52001174/article/details/141135600
版权

html左右分页最新代码

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
        }

        a,
        a:hover,
        a:focus {
            text-decoration: none;
            color: #262626;
        }

        .i-icon {
            display: inline-block;
        }

        .go-back {
            padding-top: 50px;
            text-align: center;
        }

        .window-left.fold {
            overflow: visible !important;
        }

        .window-left {
            position: relative;
            float: left;
            width: 200px;
            height: 100%;
            overflow: hidden;
            background-color: #e8e9ec;
        }

        .window-left.fold {
            overflow: visible !important;
        }

        .window-left .go-back a {
            display: inline-block;
            width: 160px;
            height: 30px;
            line-height: 30px;
            border-radius: 15px;
            border: solid 1px #7e84b1;
            text-align: center;
        }

        .window-left .go-back a .i-icon {
            width: 30px;
            height: 30px;
            margin: 0 auto;
            background-image: url("img/Icon1.png");
            background-size: contain;/*将图片整个显示出来*/
        }

        .window-left.fold .go-back a {
            width: 30px;
            height: 30px;
            border-radius: 15px;
            border: solid 1px #7e84b1;
        }

        .window-left.fold .go-back a .i-icon {
            background-image: url("img/head1.jpg");
            background-size: contain;/*将图片整个显示出来*/
        }

        .window-left .go-back {
            text-align: center;
        }

        .window-left .menu-list {
            padding-top: 20px;
            font-size: 18px;
        }

        .window-left .menu-list ul {
            list-style: none;
            padding: 0;
            margin: 0 auto;
        }

        .window-left .menu-list ul li {
            text-align: left;
            color: #616c82;
        }

        .window-left .menu-list ul li.first-menu {
            position: relative;
            color: #5f78a2;
        }

        .window-left .menu-list>ul>li .i-icon {
            width: 24px;
            height: 24px;
            vertical-align: sub;
            background-image: url("img/icon_word.png");
            background-size: contain;/*将图片整个显示出来*/
        }

        .window-left .menu-list ul li:HOVER>span {
            color: #1c9dff;
            cursor: pointer;
        }

        .window-left .menu-list ul li a {
            display: block;
        }

        .window-left .menu-list ul li.first-menu>a {
            position: relative;
            padding-left: 15px;
            width: 100%;
            line-height: 50px;
            white-space: nowrap;
        }

        .window-left .menu-list ul li.first-menu .hover-tit {
            display: block;
            position: absolute;
            left: 55px;
            top: 13px;
            width: 140px;
        }

        .window-left.fold .menu-list ul li.first-menu .hover-tit {
            display: none;
            width: 180px;
            height: 50px;
            left: 60px;
            line-height: 50px;
            padding-left: 20px;
            background-color: #bfbcbc;
            color: #646567;
            cursor: Default;
        }

        .window-left.fold .menu-list ul li.first-menu:hover {
            background-color: #bfbcbc;
        }

        .window-left.fold .menu-list ul li.first-menu:hover .hover-tit {
            display: block !important;
            top: 0;
        }

        .window-left.fold .menu-list ul li.first-menu:hover ul {
            display: block !important;
            position: absolute;
            width: 180px;
            top: 50px;
            left: 60px;
        }

        .window-left.fold .menu-list ul li.first-menu:hover ul li {
            height: 45px;
            border-top: 1px solid #35395f;
            background-color: #bfbcbc;
        }

        .window-left.fold .menu-list ul li.first-menu:hover ul li a {
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .window-left .menu-list ul li.first-menu.active>span {
            color: #1c9dff;
        }

        .window-left .menu-list ul li.first-menu.active ul li.second-menu.current a {
            background-color: #bfbcbc;
        ;
            border-left: 4px solid #101213;
            font-size: 16px;
        }

        .window-left .menu-list ul li.first-menu ul {
            display: none;
        }

        .window-left .menu-list ul li.first-menu ul li.second-menu a {
            padding: 12px 0 12px 55px;
            font-size: 16px;
            color: #28292b;
        }

        .window-left.fold .menu-list ul li.first-menu ul li.second-menu a {
            padding-left: 20px;
            font-size: 16px;
            color: #020e23;
        }

        /*.onlyOne {*/
        /*    background-color: #1c9dff;*/

        /*}*/

        .onlyOne div {
            display: none;
        }

        .onlyOne div.active {
            display: block;
        }
        .red {
            background-color: #7e84b1;
        }
    </style>
</head>

<body>
<div class="window-left">
    <div class="go-back">
        <a href="javascript:;">
            <i class="i-icon"></i>
        </a>
    </div>
    <div class="menu-list">
        <ul>
            <li class="first-menu">
                <a href="javascript:void(0);" onclick="showDiv(1)"><i class="i-icon"></i></a>
                <span class="hover-tit">首页</span>
            </li>
            <li class="first-menu">
                <a href="javascript:;"><i class="i-icon"></i></a>
                <span class="hover-tit">单词模块</span>
                <ul>
                    <li class="second-menu">
                        <a href="javascript:void(0);" onclick="showDiv(1)">单词记忆</a>
                    </li>
                    <li class="second-menu">
                        <a href="javascript:void(0);" onclick="showDiv(2)">随机单词</a>
                    </li>
                    <li class="second-menu">
                        <a href="javascript:void(0);" onclick="showDiv(3)">添加单词</a>
                    </li>
                    <li class="second-menu">
                        <a href="javascript:void(0);" onclick="showDiv(4)">测试四</a>
                    </li>
                </ul>
            </li>
            <li class="first-menu">
                <a href="javascript:;"><i class="i-icon"></i></a>
                <span class="hover-tit">菜单2</span>
                <ul>
                    <li class="second-menu">
                        <a href="javascript:void(0);" onclick="showDiv(5)">测试五</a>
                    </li>
                    <li class="second-menu">
                        <a href="javascript:void(0);" onclick="showDiv(6)">测试六</a>
                    </li>
                    <li class="second-menu">
                        <a href="javascript:void(0);" onclick="showDiv(7)">测试七</a>
                    </li>
                </ul>
            </li>
            <li class="first-menu">
                <a href="javascript:;"><i class="i-icon"></i></a>
                <span class="hover-tit">菜单3</span>
                <ul>
                    <li class="second-menu">
                        <a href="javascript:void(0);" onclick="showDiv(8)">测试八</a>
                    </li>
                    <li class="second-menu">
                        <a href="javascript:void(0);" onclick="showDiv(9)">测试九</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<div id="window-right">

    <div class="onlyOne">
<!--        -->
        <div id="div1" class="active">测试一

        </div>
        <div id="div2">

        </div>
        <div id="div3">测试三</div>
        <div id="div4">测试四</div>
        <div id="div5">测试五</div>
        <div id="div6">测试六</div>
        <div id="div7">测试七</div>
        <div id="div8">测试八</div>
        <div id="div9">测试九</div>
        <div id="div10">测试九</div>
    </div>
</div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
    $(document).ready(function() {
        $('.first-menu > a').click(function() {
            $(this).parent().find('ul').slideToggle(500);
        });
    });

    function showDiv(index) {
        //点击菜单跳转div
        $('.onlyOne div').removeClass('active');
         $('#div' + index).addClass('active');
        //点击哪个菜单哪个菜单变颜色，css中添加red
        $('.second-menu a').removeClass('red');
        $('.second-menu a[οnclick="showDiv(' + index + ')"').addClass('red');
    }

    $(function () {
        $('.go-back a').click(function () {
            $('.menu-list .first-menu').find('ul').hide()
            //收起状态
            if ($('.window-left').hasClass('fold')) {
                $('.window-left').animate({ width: '200px' }, 300, 'swing')
                $('.window-left').removeClass('fold')
            } else {
                $('.window-left').animate({ width: '60px' }, 300, 'swing')
                $('.window-left').addClass('fold')
            }
        })
    })

</script>
</html>

1
2

搬代码
关注
通向架构师的道路（第四天）之Tomcat性能调优-让小猫飞奔
lifetragedy的专栏
07-02 14万+
一、总结前一天的学习从“第三天”的性能测试一节中，我们得知了决定性能测试的几个重要指标，它们是：ü   吞吐量ü   Responsetimeü   Cpuloadü   MemoryUsage我们也在第三天的学习中对Apache做过了一定的优化，使其最优化上述4大核心指标的读数，那么我们的Apache调优了，我们的Tomcat也作些相应的调整，当完成今的课程后，到时你的“小猫”到时真的会“飞”起
技术笔试面试题(下)
Mr_赵的博客
04-18 4498
【题目编号】 jsd-02-201-5017 【知 识 点】 数据库-Oracle SQL-级联删除、左外连接、SQL基础 【难易程度】 50 【题目描述】 STOMERS表，字段为：ID：（非空，主键）bigint，NAME：（非空）varchar，AGE：int类型；创建ORDERS表，字段为：ID：（非空，主键，）bigint，ORDER_NUMBER：（非空）varchar，PRICE：...
html分栏左中右,css页面中常见左中右分栏布局的两种实现方式
weixin_34586802的博客
07-16 440
示例一：复制代码代码如下:.page_center {width:100%;}#nav {background-color:red;height:20px;}#left {width:120px;background-color:green;position:absolute;}#middle {background-color:yellow;}#right {width:120px;backgr...
html左右布局示例代码
09-28
左右布局的形式想必大家都熟悉吧，在本文有个不错的示例，希望可以帮助大家更好的了解左右布局的概念
左右移动html代码,左右移动转换文字特效HTML代码解析
weixin_36294922的博客
06-09 728
onmouseout=xiaoqing.start() style="color: #0000FF; font-size: 10pt; font-weight: bold; font-family:新细明体">文字跑马灯公告栏在这输入文字内容div align="center">→文字公告栏置中center=居中；left=靠左；right=靠右color:white →公告栏背景白色...
HTML页面模板（左右结构）
10-20
HTML页面模板（左右结构），商业化的标准模板
左右分栏框架html,左右分栏式html模板...docx
weixin_35123329的博客
06-07 880
星座 htmlcharset ="UTF-8" > > title href head>> ="css/header.css" /> ="css/content.css" />rel ="stylesheet"rel ="stylesheet">src ="img/logo.jpg" li >< div >/> a> p&gt...
HTML语言分栏左右比例怎么调整,html自适应页面上下左右分栏的处理技巧
weixin_42530793的博客
06-01 1017
html自适应页面上下左右分栏的效果可以借用CSS或者jQuery进行处理。CSS中的width和height属性的值带%的情况：height:100% 代表基于包含它的块级对象(即父元素)的百分比高度，此时为100%。width:100% 代表基于包含它的块级对象(即父元素)的百分比宽度，此时为100%。使某元素(例如id为container的元素)占据整个页面的全部时的CSS代码如下：#con...
html左右分页【搬代码】
weixin_52001174的博客
12-12 1140
html左右分页
参考文献
热门推荐
Ω｜狐步幻影
10-26 7万+
[ IIS 6 = php 5 + MySQL 5 ]body { font-family:verdana; cursor:default;}td {font-size:14px;color:darkslategray;line-height:150%}a:link {color:whitesmoke}a:hover {color:silver}a:visited
html_html图片翻页_html实现翻页_html_
10-01
实现简单的web网页，支持图片翻页等功能，清晰明了。
html页面分栏显示
11-16
采用非iframe形式，实现页面分栏效果
分屏.html (视频分屏页面效果 可分1、4、6、8、9、10、16、24、32块视频)
05-18
视频分屏页面效果 可分1、4、6、8、9、10、16、24、32块视频 页面打开直接看效果
java面试题
weixin_49277956的博客
09-05 7234
Java考试题 一：单选题 下列哪一种叙述是正确的（D ） A． abstract修饰符可修饰字段、方法和类 B． 抽象方法的body部分必须用一对大括号{ }包住 C． 声明抽象方法，大括号可有可无 D． 声明抽象方法不可写出大括号 如下代码 public class Test { public int aMethod() { static int i = 0; i++; return i; } public static void main (String args[]) { Test test
html左右箭头翻页代码,左右箭头图片_js实现图片上显示左右箭头类似翻页效果的代码...
weixin_33724759的博客
06-09 1499
摘要 腾兴网为您分享:js实现图片上显示左右箭头类似翻页效果的代码，智慧消防，长沙银行，一点英语，想看视频等软件知识，以及网灵移动办公，猴岛游戏论坛，魔游游手机网游交易网，商业尽调，百折网，winaircrack，一亩田app,2017高考数学全国卷1理科，x输入法，企业版微信，养老软件，金山快捷开关，自助游杭州住宿攻略，mac硬盘读写，教师资格证面试流程视频等软件it资讯，欢迎关注腾兴网。js实...
HTML——左右侧边栏布局
笨鸟
11-01 1万+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 上中下布局 body{ background: #42413C ; margin: 0;/*消除body中的留白*/ padding: 0; text-al
html实现快捷键翻页,zblog用键盘上的左右箭头(←和→)实现快速翻页
weixin_39797693的博客
06-08 874
zblog用键盘上的左右箭头(←和→)实现快速翻页这个功能是用js实现的，加上这个好听点说就是优化了用户体验。实现起来也非常简单，有动手能力的朋友可以尝试下。zblog现在分为zblogasp和zblogphp两个版本，js代码都是一样的，html代码略有不同。zblogphp版，将以下代码和最下面的js代码添加到post-single.php合适的位置：{if$article.Prev}上一篇...
html左右两栏布局实现
最新发布
qq_32945453的博客
06-13 2159
两栏布局实现
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值