[英]Make multiple buttons hide and show in JavaScript
So i have multiple buttons that is showing when it's clicked.所以我有多个按钮在点击时显示。 But i'm having a hard time hiding the content if another button is clicked.
但是,如果单击另一个按钮,我很难隐藏内容。
The Javascript code looks like this Javascript 代码如下所示
function portFunction() {
var e = document.getElementById("test2").style;
if(!e.display | e.display == "none"){
e.display = "block";
}
else{
e.display = "none";
}
}
And the html和 html
<nav>
<ul>
<li onclick="portFunction();"><a href="#">Portfolio</a></li>
<li onclick="blogFunction();"><a href="#">Blog</a></li>
</ul>
</nav>
How can i make it so if another button is clicked, it hides the content for the last button that was open and display the new button content?如果单击另一个按钮,我该如何做到这一点,它会隐藏最后一个打开的按钮的内容并显示新的按钮内容?
EDIT Snippet code, ok so if you click on Portfolio some text will be displayed.编辑片段代码,好的,所以如果您单击投资组合,将显示一些文本。 But if you click on Blog some other text will be displayed, but the text from Portfolio will still be displayed.
但是,如果您单击博客,则会显示一些其他文本,但仍会显示来自 Portfolio 的文本。 What i want is, if you click the Portfolio button and then the Blog button, the text from portfolio should go away.
我想要的是,如果您单击“投资组合”按钮,然后单击“博客”按钮,投资组合中的文本应该消失。 And i want this for every button.
我希望每个按钮都有这个。
function blogFunction() { var e = document.getElementById("test").style; if(!e.display | e.display == "none"){ e.display = "block"; } else{ e.display = "none"; } } function portFunction() { var e = document.getElementById("test2").style; if(!e.display | e.display == "none"){ e.display = "block"; } else{ e.display = "none"; } }
@import url(http://fonts.googleapis.com/css?family=Open+Sans); .center{ font: 100% open sans, sans-serif; margin:0; padding:0; } #test{ display:none; height:20%; width:20%; z-index:11; position:absolute; left:50%; right: 50%; } .testText{ color:red; z-index:11; } #test2{ display:none; height:20%; width:20%; z-index:11; position:absolute; left:50%; }
<nav> <ul> <li class="current"><a href="#">Home</a></li> <li onclick="portFunction();"><a href="#">Portfolio</a></li> <li onclick="blogFunction();"><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Preview</a></li> </ul> </nav> <div class="center"> <div id="test"> <h1 class="testText"> Test </h1> </div> <div id="test2"> <h1 class="testText"> Test2 </h1> </div> </div>
A simpler way to do this would be to use classes
and jQuery's eq()
something like this:一种更简单的方法是使用
classes
和 jQuery 的eq()
,如下所示:
$('.section-link').click(function() { var cur = $('.section-link').index($(this)); // get the index of the clicked link $('.section-display').removeClass('active'); // hide all of the sections $('.section-display').eq(cur).addClass('active'); // show the section at the same index of the clicked link });
.section-display:not(.active) { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <ul> <li class="section-link"><a href="#">Portfolio</a> </li> <li class="section-link"><a href="#">Blog</a> </li> </ul> </nav> <br> <br> <div class="section-display active">Section One</div> <div class="section-display">Section Two</div>
First, the CSS
rule .section-display:not(.active) { display: none; }
一、
CSS
规则.section-display:not(.active) { display: none; }
.section-display:not(.active) { display: none; }
hides every element that has the class section-display
, unless it also has the class active
. .section-display:not(.active) { display: none; }
隐藏每一个具有类元件section-display
,除非它也有类active
。 This makes all of the divs hidden but allows you to add the class active
if you want a particular section to be shown by default.这会隐藏所有 div,但如果您希望默认显示特定部分,则允许您添加
active
类。
In the jQuery, $('.section-link').click(function() { });
在 jQuery 中,
$('.section-link').click(function() { });
is a click handler.是一个点击处理程序。 Basically, it says when someone clicks on an element that has the class
section-link
, run the code in this block基本上,它表示当有人单击具有
section-link
类的元素时,运行此块中的代码
Inside the handler, the variable $(this)
refers to a jQuery object that represents the element that was clicked (in your case a link).在处理程序内部,变量
$(this)
指代一个 jQuery 对象,该对象表示被单击的元素(在您的情况下为链接)。
The first line, var cur = $('.section-link').index($(this));
第一行,
var cur = $('.section-link').index($(this));
says, gather all of the elements that have the class section-link
(all of you links) into an array and give me the index
of the one that was clicked.说,将所有具有类
section-link
(所有链接)的元素收集到一个数组中,并给我被点击的元素的index
。 So now we know that the user clicked the 2nd link for example.所以现在我们知道用户点击了第二个链接。
The next line $('.section-display').removeClass('active');
下一行
$('.section-display').removeClass('active');
removes the class active
from all of the divs that have the class section-display
which hides all the divs because of the css rule从所有具有类
section-display
的 div 中删除active
类,该类由于 css 规则隐藏了所有 div
On the next line $('.section-display').eq(cur).addClass('active');
在下一行
$('.section-display').eq(cur).addClass('active');
, $('.section-display')
gathers all of the divs that have the class section-display
into an array (these are the divs with the content). ,
$('.section-display')
将所有具有section-display
类的 div 收集到一个数组中(这些是带有内容的 div)。 After that .eq(cur)
selects the div from the array that is at the same index as the link that was clicked.之后
.eq(cur)
从数组中选择与单击的链接具有相同索引的 div。 And finally .addClass('active')
adds the class active
to the element which displays the4 element because of the css rule.最后
.addClass('active')
将类active
添加到显示 the4 元素的元素中,因为 css 规则。
So now, clicking on the first section-link
element will show the first section-display
div and hide all others.所以现在,点击第一个
section-link
元素将显示第一个section-display
div 并隐藏所有其他元素。 Clicking on the second section-link
element will show the second section-display
div and hide all others.单击第二个
section-link
元素将显示第二个section-display
div 并隐藏所有其他元素。 And so on...等等...
I added a callLastFunc() function, it saves and calls previous function, to hide the content added by previous function call.我添加了一个 callLastFunc() 函数,它保存并调用上一个函数,隐藏上一个函数调用添加的内容。
var lastCalled = null; function callLastFunc(arg) { if (arg[0]) return; if (lastCalled) lastCalled("byCallPrev"); lastCalled = arg.callee; } function blogFunction() { var e = document.getElementById("test").style; if(!e.display | e.display == "none"){ e.display = "block"; } else{ e.display = "none"; } callLastFunc(arguments); } function portFunction() { var e = document.getElementById("test2").style; if(!e.display | e.display == "none"){ e.display = "block"; } else{ e.display = "none"; } callLastFunc(arguments); }
@import url(http://fonts.googleapis.com/css?family=Open+Sans); .center{ font: 100% open sans, sans-serif; margin:0; padding:0; } #test{ display:none; height:20%; width:20%; z-index:11; position:absolute; left:50%; right: 50%; } .testText{ color:red; z-index:11; } #test2{ display:none; height:20%; width:20%; z-index:11; position:absolute; left:50%; }
<nav> <ul> <li class="current"><a href="#">Home</a></li> <li onclick="portFunction();"><a href="#">Portfolio</a></li> <li onclick="blogFunction();"><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Preview</a></li> </ul> </nav> <div class="center"> <div id="test"> <h1 class="testText"> Test </h1> </div> <div id="test2"> <h1 class="testText"> Test2 </h1> </div> </div>
Hmm, you would be better to use a framework, but this is what you want right?嗯,您最好使用框架,但这就是您想要的,对吗? This example make use of vanillaJS Framework, which is very powerful out of the box ;)
这个例子使用了 vanillaJS 框架,它非常强大,开箱即用 ;)
// lib.js sitesContent = {}; // blog.js sitesContent['blog'] = "Blog content"; // You can use templates like handlebars // portfolio.js sitesContent['portfolio'] = "Portfolio content"; // Better to use templates // app.js function navAction(site) { document.getElementById('content').innerHTML = sitesContent[site]; } navAction('portfolio'); // Means load portfolio when loaded first time
<nav> <ul> <li><a onclick="navAction('portfolio')" href="#">Portfolio</a></li> <li><a onclick="navAction('blog')" href="#">Blog</a></li> </ul> </nav> <div id="content"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.