所以我点击时会显示多个按钮。 但如果点击另一个按钮,我很难隐藏内容。
Javascript代码如下所示
function portFunction() {
var e = document.getElementById("test2").style;
if(!e.display | e.display == "none"){
e.display = "block";
}
else{
e.display = "none";
}
}
和html
<nav>
<ul>
<li onclick="portFunction();"><a href="#">Portfolio</a></li>
<li onclick="blogFunction();"><a href="#">Blog</a></li>
</ul>
</nav>
如果点击另一个按钮,我怎么能这样做呢?它隐藏了打开的最后一个按钮的内容并显示新的按钮内容?
修改 片段代码,好吧如果你点击投资组合将会显示一些文字。但是,如果您单击“博客”,则会显示其他文本,但仍会显示“投资组合”中的文本。我想要的是,如果您单击“投资组合”按钮,然后单击“博客”按钮,则投资组合中的文本应该消失。我希望每个按钮都有这个。
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>
答案 0 :(得分:1)
更简单的方法是使用classes
和jQuery&#39; s 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
});
&#13;
.section-display:not(.active) {
display: none;
}
&#13;
<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>
&#13;
首先,CSS
规则.section-display:not(.active) { display: none; }
隐藏了具有类section-display
的每个元素,除非它还具有类active
。这会使所有div隐藏,但如果您希望默认显示特定部分,则允许您添加类active
。
在jQuery中,$('.section-link').click(function() { });
是一个点击处理程序。基本上,它表示当有人点击具有类section-link
的元素时,运行此块中的代码
在处理程序内部,变量$(this)
引用一个jQuery对象,该对象表示单击的元素(在您的情况下是一个链接)。
第一行var cur = $('.section-link').index($(this));
说,将所有具有类section-link
(所有链接)的元素收集到一个数组中,然后给我index
的那个元素。被点击了。所以现在我们知道用户点击了第二个链接。
下一行$('.section-display').removeClass('active');
会从具有类active
的所有div中删除类section-display
,因为css规则而隐藏所有div
在下一行$('.section-display').eq(cur).addClass('active');
上,$('.section-display')
将所有具有类section-display
的div收集到一个数组中(这些是包含内容的div)。之后.eq(cur)
从数组中选择与所单击链接索引相同的div。最后.addClass('active')
将类active
添加到由于css规则而显示4元素的元素。
现在,点击第一个section-link
元素将显示第一个section-display
div并隐藏所有其他元素。单击第二个section-link
元素将显示第二个section-display
div并隐藏所有其他div。等等...
答案 1 :(得分:0)
我添加了一个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);
}
&#13;
@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%;
}
&#13;
<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>
&#13;
答案 2 :(得分:-1)
嗯,你最好使用一个框架,但这是你想要的吗? 这个例子使用了vanillaJS Framework,它非常强大,开箱即用;)
// 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
&#13;
<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>
&#13;