有两个独立的<nav>独立工作的标签
Having 2 separate <nav> tags that work independently
我试图得到两个单独的导航菜单独立操作取决于哪个按钮的用户点击,并显示在同一地方(左)。我有2个独立的功能,但只能让两个按钮打开相同的导航菜单(链接1,2,3不是链接4,5,6)。我可以得到第二个菜单打开,但只有当我改变ClassName为topnav而不是sidenav。我也尝试过getElementByid,但它也不起作用。谢谢你的帮助。
<div class="w3-half w3-container">
<div id="FloatingBox" class="w3-card-16 w3-round w3-blue-grey w3-animate-opacity w3-animate-bottom" style="font-size:xx-large">
<p><a title="Personal Information" onclick="w3_openpers()" class="w3-btn-floating w3-card-8 w3-animate-bottom w3-ripple w3-theme w3-red"><i class="fa fa-plus"></i></a>
Personal
</p>
</div>
</div>
<div class="w3-half w3-container">
<div id="FloatingBox" class="w3-card-16 w3-round w3-blue-grey w3-animate-opacity w3-animate-bottom" style="font-size:xx-large; ">
<p><a title="Professional Information" onclick="w3_openprof()" class="w3-btn-floating w3-card-8 w3-animate-bottom w3-ripple w3-theme w3-red"><i class="fa fa-plus"></i></a>
Professional
</p>
</div>
</div>
<!--- Side Navigation Personal--->
<nav id="persnav" class="w3-sidenav w3-white w3-card-2 w3-animate-left" style="display:none;z-index:5">
<a href="javascript:void(0)">Link 1</a>
<a href="javascript:void(0)">Link 2</a>
<a href="javascript:void(0)">Link 3</a>
<br>
<a href="javascript:void(0)" onclick="w3_closepers()" class="w3-closenav w3-text-theme w3-text-red" >Close ×</a>
</nav>
<!--- Script for Side Navigation Personal--->
<script>
function w3_openpers() {
document.getElementsByClassName("w3-sidenav")[0].style.width = "20%";
document.getElementsByClassName("w3-sidenav")[0].style.textAlign = "center";
document.getElementsByClassName("w3-sidenav")[0].style.fontSize = "30px";
document.getElementsByClassName("w3-sidenav")[0].style.paddingTop = "20%";
document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
document.getElementsByClassName("w3-sidenav")[0].style.opacity = "1";
}
function w3_closepers() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
</script>
<!--- Side Navigation Professional--->
<nav id="profnav" class="w3-sidenav w3-white w3-card-2 w3-animate-right" style="display:none;z-index:5">
<a href="javascript:void(0)">Link 4</a>
<a href="javascript:void(0)">Link 5</a>
<a href="javascript:void(0)">Link 6</a>
<br>
<a href="javascript:void(0)" onclick="w3_closeprof()" class="w3-closenav w3-text-theme w3-text-red" >Close ×</a>
</nav>
<!--- Script for Side Navigation Professional--->
<script>
function w3_openprof() {
document.getElementsByClassName("w3-sidenav")[0].style.width = "20%";
document.getElementsByClassName("w3-sidenav")[0].style.textAlign = "center";
document.getElementsByClassName("w3-sidenav")[0].style.fontSize = "30px";
document.getElementsByClassName("w3-sidenav")[0].style.paddingTop = "20%";
document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
document.getElementsByClassName("w3-sidenav")[0].style.opacity = "1";
}
function w3_closeprof() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
</script>
我建议让它更简单,只创建一个函数:
function w3_open(elNum) {
var el = document.getElementsByClassName("w3-sidenav")[elNum];
el.style.width = "20%";
el.style.textAlign = "center";
el.style.fontSize = "30px";
el.style.paddingTop = "20%";
el.style.display = "block";
el.style.opacity = "1";
}
function w3_close(elNum) {
document.getElementsByClassName("w3-sidenav")[elNum].style.display = "none";
}
那么你可以这样命名它:
<a title="Personal Information" onclick="w3_open(0)" class="w3-btn-floating w3-card-8 w3-animate-bottom w3-ripple w3-theme w3-red"><i class="fa fa-plus"></i></a>
, w3_open(0)
瞄准第一个导航,w3_open(1)
瞄准第二个导航。与关闭功能相同。
你可以通过添加一个CSS类来使它更简单:
function w3_toggle(elNum) {
document.getElementsByClassName("w3-sidenav")[elNum].classList.toggle("w3_open");
}
.w3_sidenav.w3_open{
width:20%;
text-align:center;
font-size:30px;
padding-top:20%;
display:block;
opacity:1;
}
那么你只需要一个函数,你可以把它叫做w3_toggle(0)
来切换导航打开/关闭
把第二个脚本改成:
<script>
function w3_openprof() {
document.getElementsByClassName("w3-sidenav")[1].style.width = "20%";
document.getElementsByClassName("w3-sidenav")[1].style.textAlign = "center";
document.getElementsByClassName("w3-sidenav")[1].style.fontSize = "30px";
document.getElementsByClassName("w3-sidenav")[1].style.paddingTop = "20%";
document.getElementsByClassName("w3-sidenav")[1].style.display = "block";
document.getElementsByClassName("w3-sidenav")[1].style.opacity = "1";
}
function w3_closeprof() {
document.getElementsByClassName("w3-sidenav")[1].style.display = "none";
}
</script>
作品太棒了!
尝试使用getElementsById代替getElementsByClassName
相关文章:
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- 定义完全独立的样式信息
- 如何更改reactjs中外部/独立组件的状态或属性
- 用独立变量敲除foreach绑定
- DataTables合并了两个独立表中的jQuery/Javascript函数
- 使用Javascript克隆();使一个独立的页眉跟随页面
- 创建时选择Nav大写字母
- 如何验证日期、月份和日期的3个独立输入字段;年使用jquery或javascript
- 使用脚本#编译代码(独立)
- 独立离线的html5网络应用程序
- Angular JS-文本框未在独立范围内更新
- 如何使用javascript独立地为聚合物自定义元素的每个实例的lightdom设置样式
- AngularJS-独立的控制器和DOM操作
- 删除两个独立对象中的属性,而不使用多余的删除语句
- 是否可以从独立于摄影机的three.js场景中的一个点应用雾
- 如何创建独立于数组更新的组件列表
- 单击时独立作用域值不会更改
- 创建模式对话的独立javascript库
- JavaScript-innerHTML在setInterval中不独立运行
- Nav<ul>mouseout吗?如何修复