单独的导航必须有单独的内容,显示相同的内容
Separate nav drops must have separate content, showing the same content
我在我的网站导航栏上有两个下拉导航,我想让每一个下拉导航显示自己的div,我还是JS初学者,我能得到一些帮助。和谢谢。
在拖放导航上显示相同的内容。下面是要检查的代码片段。
var x = document.getElementById("myDropnav");
function w3_open() {
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
function w3_close() {
x.className = x.className.replace(" w3-show", "");
}
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<body>
<ul class="w3-navbar w3-black">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="javascript:void(0)" onclick="w3_open()">Dropnav <i class="fa fa-caret-down"></i></a></li>
<li><a href="javascript:void(0)" onclick="w3_open()">Dropnav1 <i class="fa fa-caret-down"></i></a></li>
</ul>
<nav class="w3-dropnav w3-card-2" style="display:none" id="myDropnav">
<div class="w3-container">
<span onclick="w3_close('dropnav')" class="w3-closebtn w3-xlarge" title="Close Menu">×</span>
</div>
<div class="w3-row-padding w3-padding-bottom">
<div class="w3-third">
<h3>HTML/CSS</h3>
<a href="#">Learn </a>
<a href="#">Learn </a>
<a href="#">Learn </a>
</div>
<div class="w3-third">
<h3>JavaScript</h3>
<a href="#">Learn JavaScript</a>
<a href="#">Learn jQuery</a>
<a href="#">Learn AppML</a>
</div>
<div class="w3-third">
<h3>Graphics</h3>
<a href="#">Learn Canvas</a>
<a href="#">Learn SVG</a>
</div>
</div>
<br>
</nav>
<nav class="w3-dropnav w3-card-2" style="display:none" id="myDropnav">
<div class="w3-container">
<span onclick="w3_close('dropnav')" class="w3-closebtn w3-xlarge" title="Close Menu">×</span>
</div>
<div class="w3-row-padding w3-padding-bottom">
<div class="w3-third">
<h3>HTML/CSS</h3>
<a href="#">Learn HTML</a>
<a href="#">Learn CSS</a>
<a href="#">Learn W3.CSS</a>
</div>
<div class="w3-third">
<h3>JavaScript</h3>
<a href="#">Learn JavaScript</a>
<a href="#">Learn jQuery</a>
<a href="#">Learn AppML</a>
</div>
<div class="w3-third">
<h3>Graphics</h3>
<a href="#">Learn Canvas</a>
<a href="#">Learn SVG</a>
</div>
</div>
<br>
</nav>
<div class="w3-container">
<p>Click on the "Dropnav" button to toggle the dropnav menu.</p>
</div>
对于您的示例,您可以将代码更改如下:
将菜单标识符添加到单击事件中。
...
<li><a href="javascript:void(0)" onclick="w3_close('myDropnav2');w3_open('myDropnav1');">Dropnav 1<i class="fa fa-caret-down"></i></a></li>
<li><a href="javascript:void(0)" onclick="w3_close('myDropnav1');w3_open('myDropnav2');">Dropnav 2<i class="fa fa-caret-down"></i></a></li>
...
将菜单的标识符更改为唯一。
...
<nav class="w3-dropnav w3-card-2" style="display:none" id="myDropnav1">
<div class="w3-container">
<span onclick="w3_close('myDropnav1')" class="w3-closebtn w3-xlarge" title="Close Menu">×</span>
...
<nav class="w3-dropnav w3-card-2" style="display:none" id="myDropnav2">
<div class="w3-container">
<span onclick="w3_close('myDropnav2')" class="w3-closebtn w3-xlarge" title="Close Menu">×</span>
...
考虑当前菜单的标识符
function w3_open(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
function w3_close(id) {
var x = document.getElementById(id);
x.className = x.className.replace(" w3-show", "");
}
function w3_open(identifier) {
w3_close();
var x = document.getElementById(identifier);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
function w3_close() {
var elements = document.getElementsByClassName('dropnav-identifier');
Array.prototype.forEach.call(elements, function(element, index) {
element.className = element.className.replace(" w3-show", "");
});
}
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<body>
<ul class="w3-navbar w3-black">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="javascript:void(0)" onclick="w3_open('myDropnav')">Dropnav <i class="fa fa-caret-down"></i></a></li>
<li><a href="javascript:void(0)" onclick="w3_open('myDropnav1')">Dropnav1 <i class="fa fa-caret-down"></i></a></li>
</ul>
<nav class="w3-dropnav w3-card-2 dropnav-identifier" style="display:none" id="myDropnav">
<div class="w3-container">
<span onclick="w3_close('dropnav')" class="w3-closebtn w3-xlarge" title="Close Menu">×</span>
</div>
<div class="w3-row-padding w3-padding-bottom">
<div class="w3-third">
<h3>HTML/CSS</h3>
<a href="#">Learn </a>
<a href="#">Learn </a>
<a href="#">Learn </a>
</div>
<div class="w3-third">
<h3>JavaScript</h3>
<a href="#">Learn JavaScript</a>
<a href="#">Learn jQuery</a>
<a href="#">Learn AppML</a>
</div>
<div class="w3-third">
<h3>Graphics</h3>
<a href="#">Learn Canvas</a>
<a href="#">Learn SVG</a>
</div>
</div>
<br>
</nav>
<nav class="w3-dropnav w3-card-2 dropnav-identifier" style="display:none" id="myDropnav">
<div class="w3-container">
<span onclick="w3_close()" class="w3-closebtn w3-xlarge" title="Close Menu">×</span>
</div>
<div class="w3-row-padding w3-padding-bottom">
<div class="w3-third">
<h3>HTML/CSS</h3>
<a href="#">Learn HTML</a>
<a href="#">Learn CSS</a>
<a href="#">Learn W3.CSS</a>
</div>
<div class="w3-third">
<h3>JavaScript</h3>
<a href="#">Learn JavaScript</a>
<a href="#">Learn jQuery</a>
<a href="#">Learn AppML</a>
</div>
<div class="w3-third">
<h3>Graphics</h3>
<a href="#">Learn Canvas</a>
<a href="#">Learn SVG</a>
</div>
</div>
<br>
</nav>
<nav class="w3-dropnav w3-card-2" style="display:none" id="myDropnav1">
<div class="w3-container">
<span onclick="w3_close()" class="w3-closebtn w3-xlarge" title="Close Menu">×</span>
</div>
<div class="w3-row-padding w3-padding-bottom">
<div class="w3-third">
<h3>This is nav 2</h3>
<a href="#">Learn HTML nav 2</a>
<a href="#">Learn CSS nav 2</a>
<a href="#">Learn W3.CSS nav 2</a>
</div>
<div class="w3-third">
<h3>JavaScript nav 2</h3>
<a href="#">Learn JavaScript nav2</a>
<a href="#">Learn jQuery nav 2</a>
<a href="#">Learn AppML nav 2</a>
</div>
<div class="w3-third">
<h3>Graphics nav 2</h3>
<a href="#">Learn Canvas nav 2</a>
<a href="#">Learn SVG nav 2</a>
</div>
</div>
<br>
</nav>
<div class="w3-container">
<p>Click on the "Dropnav" button to toggle the dropnav menu.</p>
</div>
可以通过调用w3_open()函数发送相关数据来实现。
相关文章:
- 使用简单的JavaScript或jQuery单独识别每个选择选项,并在DIV中显示
- 显示单独数组中两个数组的相同元素
- 如何获得添加多个文本框'使用jQuery在另一个单独的文本框中显示s值
- 单击时将嵌套数组/对象值显示到单独的元素中
- 如何用图形填充流星集合并单独显示它们
- JavaScript 循环访问嵌套对象并显示在单独的行中
- 根据单独选择的选项显示 HTML 选项
- 在 CSS 中有一个单独的伪选择器,以显示有关一行中多个元素的信息
- 拉斐尔JS - 悬停 - 显示/隐藏单独的 DIV
- 如何以大写字母单独显示下拉列表的选定值
- 在数组中显示特定的对象值,而不是单独显示
- 如何在信息框中单独显示标记信息
- 扩展时钟组件的角度指令以单独显示日期时间元素
- 如何使用JQuery DatePicker或angularJS单独显示星期几
- 单独显示JS数组中的每个项目
- adobe livecycle消息框单独显示,而不是在单个框中
- 如何使用javascript在输出中单独显示列表项
- 单独显示json_encode结果
- Angular单独显示和隐藏JSON对象
- 是否有可能屏蔽/隐藏冗长的URL,只是单独显示域名