左部导航实现图片的显示和隐藏（display：none和block的使用）

最新推荐文章于 2021-08-01 13:58:33 发布
最新推荐文章于 2021-08-01 13:58:33 发布
阅读量717 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44011306/article/details/106241119
版权

左部导航实现图片的显示和隐藏

效果展示

在这里插入图片描述

代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>study15</title>
    <link href="main.css" rel="stylesheet">
</head>
<body>
<div class="mr-box">
    <div class="mr-shop">
        <ul>
            <li> 女装 /内衣
                <div class="mr-shop-items">
                    <div class="mr-item"> <img src="images1/2.jpg">
                        <p>【黑色上市】Huawei/华为 Mate 9 32/64GB4G智能手机限量抢</p>
                        <p>华为官方旗舰店</p>
                    </div>
                </div>
            </li>
            <li>男装 /运动户外
                <div class="mr-shop-items">
                    <div class="mr-item"> <img src="images1/3.jpg">
                        <p>【黑色上市】Huawei/华为 Mate 9 32/64GB4G智能手机限量抢</p>
                        <p>华为官方旗舰店</p>
                    </div>
                </div>
            </li>
            <li>女鞋 /男鞋 /箱包
                <div class="mr-shop-items">
                    <div class="mr-item"> <img src="images1/4.jpg">
                        <p>【黑色上市】Huawei/华为 Mate 9 32/64GB4G智能手机限量抢</p>
                        <p>华为官方旗舰店</p>
                    </div>
                </div>
            </li>
            <li>化妆品 /个人护理
                <div class="mr-shop-items">
                    <div class="mr-item"> <img src="images1/2.jpg">
                        <p>【黑色上市】Huawei/华为 Mate 9 32/64GB4G智能手机限量抢</p>
                        <p>华为官方旗舰店</p>
                    </div>
                </div>
            </li>
            <li>腕表 /珠宝饰品 /眼镜
                <div class="
最低0.47元/天 解锁文章
康立志
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Boostrap V4，左侧菜单栏可缩进，并根据屏幕宽度自适应大小。
weixin_34288121的博客
01-16 1867
为什么80%的码农都做不了架构师？>>> ...
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
12-04
闲来无聊，看到百度图片hover的时候提示框的效果，遂想试一试自己能否实现。 百度图片hover的效果： 需求： 　1. 当鼠标从图片上部移入的时候，提示框从上部移到正常位置。从上部移出的时候，提示框从正常位置移到...
关于display:none和display:block的问题
不积跬步，无以至千里
08-21 2万+
如果使用了display:none，会使该标签消失；可以通过display:block重新恢复该标签。但是这里有一个问题，使用了display：none之后会使该标签原本的样式被清除，所以就算重新恢复标签也不会恢复原本的样式。 解决办法： 不要直接令某一个标签的display属性设置为none，应当用一个div标签将要消失的标签包起来，然后通过该div标签的display来实现内部标签的隐藏和
Jquery、简单的下拉列表、网页左部导航菜单
weixin_34025151的博客
05-13 57
简单的下拉菜单、左部导航使用。 2016-5-13 记 效果图如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉列表</title> <s...
display属性常用的四个值：block、inline、inline-block、none
No8g攻城狮的博客
01-07 2822
目录 1、block 块级元素 1.1、块级元素特点 1.2、常用的块状元素有 2、inline 内联（行级）元素 2.1、块级元素特点 2.2、常用的内联元素有 3、display:none 4、总结 1、block 块级元素 1.1、块级元素特点 a. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父级宽度。 b. ...
编译原理及实现技术：8.语法分析__文法等价变换.ppt
05-17
编译原理及实现技术：语法分析__文法等价变换 ...这些文法等价变换是编译原理及实现技术中非常重要的内容，它们可以帮助我们将一个文法转换为另外一个等价的文法，从而实现语法分析的优化和简化。
android:layout_gravity和android:gravity的区别
01-04
1.首先来看看Android:layout_gravity和android:gravity的使用区别。 android:gravity： 这个是针对控件里的元素来说的，用来控制元素在该控件里的显示位置。例如，在一个Button按钮控件中设置如下两个属性， android...
js中的scroll和offset 使用比较的实例与分析
01-21
设置对象到页面左部的距离请用style.left属性. 3.offsetWidth :当前对象的宽度.与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则...
基于MVC设计模式和BS结构实现的网上图书商城项目java源码+项目说明文档(毕设项目).zip
01-05
基于MVC设计模式和BS结构实现的网上图书商城项目java源码+项目说明文档(毕设项目).zip 【项目介绍】 Java网上图书商城，项目基于MVC设计模式，采用B/S结构 【前台首页设计】 首页模块包括3个主要的部分，采用内嵌...
div+css菜单导航布局自适应宽度
12-20
div+css菜单导航布局自适应宽度，纯div+css
display:none与display:block隐藏与显示内容？
weixin_44657272的博客
01-01 4096
如果把这里的:target中的display:block改为display:inline，可以达到同样的效果，即最初隐藏dl中的内容，点击了指向dl的链接后才显示对应的dl的内容。那用display:block的原因是什么？ ...
question1（display: block；和display: none；冲突吗）
w296932099的博客
08-01 1110
aaa
#273 – 通过Image 控件显示图片（Display a Picture Using an Image Control）
Milo的专栏
09-18 926
Image 控件允许用户在界面上显示包括.png, .jpg, .gif, .bmp, .ico, .wdp, or .tiff等类型图像。 通过设置它的Source 属性使Image 控件能够找到图片。下面的例子中，通过一个URI将Source 属性指向一个.jpg的图像文件，或者一个唯一的资源标识符。 <Window Width="400" Height="300">
display:none/block的应用以及和visibility的区别，隐藏/显示内容
u012309349的博客
10-24 4017
display:none/block; visibility:hidden/visible;
iOS导航栏的正确隐藏方式
热门推荐
BearsG
07-17 6万+
简介 在项目中经常碰到首页顶部是无限轮播,需要靠最上面显示.有的设置导航栏为透明等一系列的方法,这个可以借助第三方.或者干脆简单粗暴的直接隐藏掉导航栏.可是push到下一个页面的时候是需要导航栏的,如何做了,这里给出两种方法.第一种做法 -注意这里一定要用动画的方式隐藏导航栏,这样在使用滑动返回手势的时候效果最好,和上面动图一致.这样做有一个缺点就是在切换tabBar的时候有一个导航栏向上消失
html左侧导航栏显示不全,左侧导航栏 隐藏 显示
weixin_39934613的博客
05-30 865
HTML:clickCSS:.navslid {width: 200px;height: 500px;background-color: #1A2226;display: inline-block;}@keyframes show {from {width: 0;}to {width: 200px;}}@keyframes hide {from {width: 200px;}to {width: ...
access vba 用代码隐藏隐藏左边导航栏
低调的嚣张
01-09 4378
Private Sub 隐藏工具栏_Click()     DoCmd.SelectObject acForm, , True     DoCmd.RunCommand acCmdWindowHide End Sub Private Sub 不隐藏工具栏_Click()     DoCmd.SelectObject acForm, , True '    DoCmd.RunCo
导航栏的显示和隐藏
Zhuxxxxx的博客
06-28 1977
在制作网页顶部的导航栏时，往往都需要使它跟着页面的上下滚动而发生变化，最常见的是让它显示或隐藏，首先，做出一个类为“daohang”，名为“daohan”的大标签（当然名字随便取）： 做好自己想设的框架后，给这个大标签设置好它的各种属性，除基本形状外，还需给它设置动画属性，使导航栏动起来更流畅： 然后，还要在设置两个隐藏的属性，分别代表导航栏的出现的位置和影藏时的位置： 最后，在页面加载时，先在页面中命名一个值“ost”，并在页面的滚动事件中，给页面的顶部偏移量设值“cOst”
怎么实现左部导航，右边网页
最新发布
06-09
实现左侧导航栏和右侧网页的布局，可以使用 HTML、CSS 和 JavaScript 来完成。 下面是一个简单的实现过程： 1. HTML 结构 首先，需要在 HTML 中定义左侧导航栏和右侧网页的结构，可以使用 `<div>` 元素来实现： ``` <div class="container"> <div class="sidebar"> <!-- 左侧导航栏 --> </div> <div class="content"> <!-- 右侧网页内容 --> </div> </div> ``` 2. CSS 样式 接下来，需要使用 CSS 样式来定义左侧导航栏和右侧网页的样式，可以使用 `float` 和 `width` 属性来实现： ``` .container { width: 100%; height: 100%; } .sidebar { float: left; width: 200px; height: 100%; } .content { margin-left: 200px; height: 100%; } ``` 3. JavaScript 交互 最后，需要使用 JavaScript 来实现左侧导航栏和右侧网页的交互。可以使用事件监听器来监听左侧导航栏的点击事件，然后根据点击的导航项来加载对应的网页内容。 具体实现可以使用 jQuery 库来简化代码。例如，可以在左侧导航栏的每个导航项中添加一个 `data-url` 属性，表示对应的网页地址，然后在 JavaScript 中监听 `click` 事件，根据 `data-url` 属性的值来加载对应的网页内容： ``` $(function() { $('.sidebar-item').on('click', function() { var url = $(this).data('url'); $('.content').load(url); }); }); ``` 这样，当用户点击左侧导航栏的某个导航项时，右侧网页区域就会自动加载对应的网页内容。 以上是一个简单的实现过程，实际应用中还需要根据具体需求进行调整和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值