js的问题

桦随枫落 2017-12-13 11:42:52
<!DOCTYPE html>
<html class="html">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Mess_board_home_page</title>
<link rel="stylesheet" type="text/css" href="../css/Mess_board_home_page.css">
<link rel="stylesheet" type="text/css" href="../css/iconfont_one.css">
<link rel="stylesheet" type="text/css" href="../css/iconfont_two.css">
<script type="text/javascript" src="../js/Mess_board_home_page.js"></script>
</head>
<body class="body">
<div class="left">
<div class="left_top">
<i class="iconfont icon-arrow-left"></i>
<i class="iconfont icon-dianyuan"></i>
<img class="Head_portrait" src="../images/Head_portrait.png" />
<div class="nickname">昵称：</div>
</div>

<div class="left_middle">
<i class="iconfont icon-addfriend"></i>
<div class="Grouping">分组</div>
<div class="menu">
<div class="Special_attention">
<form name="登录界面method="POST" ><div id="abc" onclick="ma(event)"><input id="Special_attention_" type="submit" value="特别关注"><i class="iconfont icon-arrow-right"></i></div>
<a href="#" id="ss"><div id="Special_attention_son" class="show"><img class="Special_attention_pic" src="../images/Special_attention_Head_portrait.png" /><input class="Special_attention_son_" type="submit" value="好友昵称:"></form>
</div></a>
</div>



</div>
</div>
</div>
</body>
</html>



css
*{
margin:0;
padding: 0px;
}
@font-face{
font-family:FZJZJW;
src:url(../font/[FZJZJW].ttf);
}
.html{
height:100%;
}
.body{
height:100%;
display:flex;
}
.left{
min-height:768px;
width: 285px;
background-color:#dcb25b;
position:relative;
overflow:hidden;
}
.left_top{
height:260px;
width:285px;
position:absolute;
}
.Head_portrait{
position:absolute;
top:97px;
left: 85px;
}
.nickname{
font-size: :18px;
font-family:微软雅黑;
color:#fcf9f9;
position:absolute;
bottom: 5px;
left:90px;
}
.left_middle{
width:237px;
height:491px;
background-color:#ebd19f;
position:absolute;
top:260px;
left:24px;
}
.Grouping{
width:181px;
color:#28313f;
font-size:18px;
font-family: 微软雅黑;
border-bottom: solid 2px #ceaf70;
position:absolute;
top:101px;
left:32px;
}
.menu{
width:176px;
height:148px;
position:relative;
top:143px;
left: 32px;
font-size:18px;
font-family: 微软雅黑;
color:#28313f;

}
.show{
display:none;
}
.Special_attention{
position:relative;
margin-bottom:24px;
}
#Special_attention_{
background-color:#ebd19f;
border:none;
font-size: 18px;
font-family: 微软雅黑;
padding:6px 101px 6px 0px;
outline:none;
}
#ss{
width:182px;
height:40px;
}
#Special_attention_son{
width:178px;
height:36px;
border: solid 2px #fbf1dc;
border-radius:5px;
position:relative;
top:11px;
z-index:999;
}
.Special_attention_pic{
position:absolute;
left: 5px;
top:5px;
}
.Special_attention_son_{
background-color:#ebd19f;
border:none;
z-index:6;
padding:11px 85px 8px 37px;
outline:none;
}

js
'use strict';
function ma(e){
e.preventDefault();
document.getElementById("Special_attention_son").classList.toggle("show");

}
那个特别关心那个子菜单点击自己也隐藏，这是为什么，还有我a标签怎么只选择了img和边框？？急救
...全文
156 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
桦随枫落 2017-12-14
  • 打赏
  • 举报
 回复
引用 1 楼 wwww_net 的回复:
a的默认事件没有屏蔽 <!DOCTYPE html> <html class="html"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Mess_board_home_page</title> <link rel="stylesheet" type="text/css" href="../css/Mess_board_home_page.css"> <link rel="stylesheet" type="text/css" href="../css/iconfont_one.css"> <link rel="stylesheet" type="text/css" href="../css/iconfont_two.css"> <script type="text/javascript" src="../js/Mess_board_home_page.js"></script> <style> *{ margin:0; padding: 0px; } @font-face{ font-family:FZJZJW; src:url(../font/[FZJZJW].ttf); } .html{ height:100%; } .body{ height:100%; display:flex; } .left{ min-height:768px; width: 285px; background-color:#dcb25b; position:relative; overflow:hidden; } .left_top{ height:260px; width:285px; position:absolute; } .Head_portrait{ position:absolute; top:97px; left: 85px; } .nickname{ font-size: :18px; font-family:微软雅黑; color:#fcf9f9; position:absolute; bottom: 5px; left:90px; } .left_middle{ width:237px; height:491px; background-color:#ebd19f; position:absolute; top:260px; left:24px; } .Grouping{ width:181px; color:#28313f; font-size:18px; font-family: 微软雅黑; border-bottom: solid 2px #ceaf70; position:absolute; top:101px; left:32px; } .menu{ width:176px; height:148px; position:relative; top:143px; left: 32px; font-size:18px; font-family: 微软雅黑; color:#28313f; } .show{ display:none; } .Special_attention{ position:relative; margin-bottom:24px; } #Special_attention_{ background-color:#ebd19f; border:none; font-size: 18px; font-family: 微软雅黑; padding:6px 101px 6px 0px; outline:none; } #ss{ width:182px; height:40px; } #Special_attention_son{ width:178px; height:36px; border: solid 2px #fbf1dc; border-radius:5px; position:relative; top:11px; z-index:999; } .Special_attention_pic{ position:absolute; left: 5px; top:5px; } .Special_attention_son_{ background-color:#ebd19f; border:none; z-index:6; padding:11px 85px 8px 37px; outline:none; } </style> </head> <body class="body"> <div class="left"> <div class="left_top"> <i class="iconfont icon-arrow-left"></i> <i class="iconfont icon-dianyuan"></i> <img class="Head_portrait" src="../images/Head_portrait.png" /> <div class="nickname">昵称：</div> </div> <div class="left_middle"> <i class="iconfont icon-addfriend"></i> <div class="Grouping">分组</div> <div class="menu"> <div class="Special_attention"> <form name="登录界面"method="POST" > <div id="abc" onclick="ma(event)" style="border:1px solid red;"> <input id="Special_attention_" type="submit" value="特别关注"><i class="iconfont icon-arrow-right"></i> </div> <a href="#" id="ss" onclick="s(event)"> <div id="Special_attention_son" class="show"> <img class="Special_attention_pic" src="../images/Special_attention_Head_portrait.png" /> <input class="Special_attention_son_" type="submit" value="好友昵称:"> </div> </a> </form> </div> </div> </div> </div> <script> function ma(e){ console.log(e); e.preventDefault(); document.getElementById("Special_attention_son").classList.toggle("show"); } function s(e){ e.preventDefault(); } </script> </body> </html>
非常感谢，我这种布局为什么会导致X轴消失，要怎么解决
wwww_net 2017-12-14
  • 打赏
  • 举报
 回复
a的默认事件没有屏蔽 <!DOCTYPE html> <html class="html"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Mess_board_home_page</title> <link rel="stylesheet" type="text/css" href="../css/Mess_board_home_page.css"> <link rel="stylesheet" type="text/css" href="../css/iconfont_one.css"> <link rel="stylesheet" type="text/css" href="../css/iconfont_two.css"> <script type="text/javascript" src="../js/Mess_board_home_page.js"></script> <style> *{ margin:0; padding: 0px; } @font-face{ font-family:FZJZJW; src:url(../font/[FZJZJW].ttf); } .html{ height:100%; } .body{ height:100%; display:flex; } .left{ min-height:768px; width: 285px; background-color:#dcb25b; position:relative; overflow:hidden; } .left_top{ height:260px; width:285px; position:absolute; } .Head_portrait{ position:absolute; top:97px; left: 85px; } .nickname{ font-size: :18px; font-family:微软雅黑; color:#fcf9f9; position:absolute; bottom: 5px; left:90px; } .left_middle{ width:237px; height:491px; background-color:#ebd19f; position:absolute; top:260px; left:24px; } .Grouping{ width:181px; color:#28313f; font-size:18px; font-family: 微软雅黑; border-bottom: solid 2px #ceaf70; position:absolute; top:101px; left:32px; } .menu{ width:176px; height:148px; position:relative; top:143px; left: 32px; font-size:18px; font-family: 微软雅黑; color:#28313f; } .show{ display:none; } .Special_attention{ position:relative; margin-bottom:24px; } #Special_attention_{ background-color:#ebd19f; border:none; font-size: 18px; font-family: 微软雅黑; padding:6px 101px 6px 0px; outline:none; } #ss{ width:182px; height:40px; } #Special_attention_son{ width:178px; height:36px; border: solid 2px #fbf1dc; border-radius:5px; position:relative; top:11px; z-index:999; } .Special_attention_pic{ position:absolute; left: 5px; top:5px; } .Special_attention_son_{ background-color:#ebd19f; border:none; z-index:6; padding:11px 85px 8px 37px; outline:none; } </style> </head> <body class="body"> <div class="left"> <div class="left_top"> <i class="iconfont icon-arrow-left"></i> <i class="iconfont icon-dianyuan"></i> <img class="Head_portrait" src="../images/Head_portrait.png" /> <div class="nickname">昵称：</div> </div> <div class="left_middle"> <i class="iconfont icon-addfriend"></i> <div class="Grouping">分组</div> <div class="menu"> <div class="Special_attention"> <form name="登录界面"method="POST" > <div id="abc" onclick="ma(event)" style="border:1px solid red;"> <input id="Special_attention_" type="submit" value="特别关注"><i class="iconfont icon-arrow-right"></i> </div> <a href="#" id="ss" onclick="s(event)"> <div id="Special_attention_son" class="show"> <img class="Special_attention_pic" src="../images/Special_attention_Head_portrait.png" /> <input class="Special_attention_son_" type="submit" value="好友昵称:"> </div> </a> </form> </div> </div> </div> </div> <script> function ma(e){ console.log(e); e.preventDefault(); document.getElementById("Special_attention_son").classList.toggle("show"); } function s(e){ e.preventDefault(); } </script> </body> </html>
javascript 直接调用OC 方法demo
demo 实现了 JS 直接调用OC的方法，而不是通过间接的截获 url参数来进行调用 有什么问题 请联系博主 j_akill
解决2020版IDEA的JAVAScript中找不到vue.js问题
解决2020版IDEA的JAVAScript中找不到vue.js问题 1、安装插件 打开IDEA的界面如下 步骤：(1)file——>setting——>plugins ​ (2)在搜索框搜索vue,然后vue.js——>install 新建project,在JavaScript中就...
10个非常基础的 Javascript 问题
我搜索了许多Javascript面试问题，这10个对我来说最重要。让我们深入研究一下。 1.什么是Javascript？ Javascript是一种用于Web开发的编程语言。JavaScript在网络的客户端上运行。 根据MDN，JavaScript（通常缩写为...
javascript 点击事件执行两次js问题
因为利用js在页面加载后添加需要点击事件的代码，发现在点击后会代码会执行两次，因为有toggle效果，...后面查到，off函数可以解除由on函数所绑定的事件，所以在js代码中on函数前调用下Off函数，就正常了： $("li.task
JavaScript中常见问题及解决
JavaScript中在项目中的常见问题以及解决方案
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章