多个按钮的多个Sidenavs？

时间：2017-10-24 12:59:27

标签： javascript jquery html css

我正在使用屏幕右侧有五个图标的网站。在一个完美的世界中，点击时每个图标都会打开它的图标。各自的sidenav。

例如：

MyBtn onclick打开sidenav并关闭所有其他sideavs。

MyBtn2 onclick打开sidenav2并关闭所有其他sidenavs。

......等等......

然而，

我目前有五个图标。不幸的是，当点击任何一个图标时;它打开sidenav5而不是它的＆＃39;各自的sidenav。

我在这里缺少什么？

我提前感谢任何可以提供帮助的人！

以下相关的ode ...我确实倾向于使用我知道禁忌的样式标签：

＆＃13;
＆＃13; 
document.getElementById("myBtn").addEventListener("click", open_close);

var menuState = 0 // close
function open_close() {
  if(menuState === 0){
     menuState = 1;
     document.getElementById("sidenav").style.width = "320px";
	 document.getElementById("main").style.marginLeft = "-300px";
	
     //document.getElementById("main").style.marginLeft = "250px";
     document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  }
  else {
     menuState = 0;
     document.getElementById("sidenav").style.width = "0";
	 document.getElementById("main").style.marginLeft = "0"; 
     //document.getElementById("main").style.marginLeft = "0";
     document.body.style.backgroundColor = "white";
  }
  console.log(menuState);
}
		/**/
	
	
	
	
	
	
	
	
	
	
	
	
document.getElementById("myBtn2").addEventListener("click", open_close);

var menuState = 0 // close
function open_close() {
  if(menuState === 0){
     menuState = 1;
     document.getElementById("sidenav2").style.width = "320px";
	 document.getElementById("main").style.marginLeft = "-300px";
	
     //document.getElementById("main").style.marginLeft = "250px";
     document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  }
  else {
     menuState = 0;
     document.getElementById("sidenav2").style.width = "0";
	 document.getElementById("main").style.marginLeft = "0"; 
     //document.getElementById("main").style.marginLeft = "0";
     document.body.style.backgroundColor = "white";
  }
  console.log(menuState);
}
	
	/**/
	
	
	
	
	
	
	
	
	
	
	
	
document.getElementById("myBtn3").addEventListener("click", open_close);

var menuState = 0 // close
function open_close() {
  if(menuState === 0){
     menuState = 1;
     document.getElementById("sidenav3").style.width = "320px";
	 document.getElementById("main").style.marginLeft = "-300px";
	
     //document.getElementById("main").style.marginLeft = "250px";
     document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  }
  else {
     menuState = 0;
     document.getElementById("sidenav3").style.width = "0";
	 document.getElementById("main").style.marginLeft = "0"; 
     //document.getElementById("main").style.marginLeft = "0";
     document.body.style.backgroundColor = "white";
  }
  console.log(menuState);
}
	
	/**/
	
	
	
	
	
	
	
	
	
	
	
	
document.getElementById("myBtn4").addEventListener("click", open_close);

var menuState = 0 // close
function open_close() {
  if(menuState === 0){
     menuState = 1;
     document.getElementById("sidenav4").style.width = "320px";
	 document.getElementById("main").style.marginLeft = "-300px";
	
     //document.getElementById("main").style.marginLeft = "250px";
     document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  }
  else {
     menuState = 0;
     document.getElementById("sidenav4").style.width = "0";
	 document.getElementById("main").style.marginLeft = "0"; 
     //document.getElementById("main").style.marginLeft = "0";
     document.body.style.backgroundColor = "white";
  }
  console.log(menuState);
}
	
	/**/
	
	
	
	
	
	
	
	
	
	
	
	
document.getElementById("myBtn5").addEventListener("click", open_close);

var menuState = 0 // close
function open_close() {
  if(menuState === 0){
     menuState = 1;
     document.getElementById("sidenav5").style.width = "320px";
	 document.getElementById("main").style.marginLeft = "-300px";
	
     //document.getElementById("main").style.marginLeft = "250px";
     document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  }
  else {
     menuState = 0;
     document.getElementById("sidenav5").style.width = "0";
	 document.getElementById("main").style.marginLeft = "0"; 
     //document.getElementById("main").style.marginLeft = "0";
     document.body.style.backgroundColor = "white";
  }
  console.log(menuState);
}
＆＃13; 
#sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: transparent;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

#sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 16sp;
    color: black;
    display: block;
    transition: 0.3s;
}

#sidenav a:hover {
    color: lightgray;
}

@media screen and (max-height: 450px) {
  #sidenav {padding-top: 15px;}
  #sidenav a {font-size: 18px;}
}
	
	
	
	
	

	
	
	/**/
	
	
	
	
	
	
	
	
	
	
	#sidenav2 {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: transparent;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

#sidenav2 a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 16sp;
    color: black;
    display: block;
    transition: 0.3s;
}

#sidenav2 a:hover {
    color: lightgray;
}

@media screen and (max-height: 450px) {
  #sidenav2 {padding-top: 15px;}
  #sidenav2 a {font-size: 18px;}
}
	
	
	
	
	
	
	
	
	/**/
	
	
	
	
	
	
	#sidenav3 {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: transparent;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

#sidenav3 a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 16sp;
    color: black;
    display: block;
    transition: 0.3s;
}

#sidenav3 a:hover {
    color: lightgray;
}

@media screen and (max-height: 450px) {
  #sidenav3 {padding-top: 15px;}
  #sidenav3 a {font-size: 18px;}
}
	
	
	
	
	
	/**/
	
	
	
	
		#sidenav4 {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: transparent;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

#sidenav4 a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 16sp;
    color: black;
    display: block;
    transition: 0.3s;
}

#sidenav4 a:hover {
    color: lightgray;
}

@media screen and (max-height: 450px) {
  #sidenav4 {padding-top: 15px;}
  #sidenav4 a {font-size: 18px;}
}
	
	
	
	
	
	
	/**/
	
	
	
	
	
	
	
		#sidenav5 {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: transparent;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

#sidenav5 a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 16sp;
    color: black;
    display: block;
    transition: 0.3s;
}

#sidenav5 a:hover {
    color: lightgray;
}

@media screen and (max-height: 450px) {
  #sidenav5 {padding-top: 15px;}
  #sidenav5 a {font-size: 18px;}
}
	
	
	
	#main {
    transition: margin-left .5s;
    padding: -16px;
}
＆＃13; 
<!---->																		
<div style="font-family: Centaur; font-size: 18px; color: black; position: fixed; " id="sidenav" class="sidenav">
<div style="width: 100%; margin-top: 6%; float: left;">	
<table>
<tbody>
<tr>
<td style="width: 20%;"><a style="font-family:Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><img src="images/TehNextGeneration.png" width="auto" height="35px" alt=""/></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Early Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Roman Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Viking Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Medieval One Handed</b></a></td>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Hand & a Half Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Medieval Two Handed</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Single Edged Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Next Generation Scabbards</b></a></td>
</tr>
</tbody>
</table>
</div>
</div>
		
		
		
		
		
		
<!---->
		<div style="font-family: Centaur; font-size: 18px; color: black; position: fixed; " id="sidenav2" class="sidenav2">
<div style="width: 100%; margin-top: 6%; float: left;">	
<table>
<tbody>
<tr>
<td style="width: 20%;"><a style="font-family:Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><img src="images/The Museum Line.png" width="auto" height="35px" alt=""/></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">One Handed Museum Line Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Two Handed Museum Line Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Museum Line Scabbards</b></a></td>
</tr>
</tbody>
</table>
</div>
</div>
		
		
		
		
		
		
<!---->
<div style="font-family: Centaur; font-size: 18px; color: black; position: fixed; " id="sidenav3" class="sidenav3">
<div style="width: 100%; margin-top: 6%; float: left;">	
<table>
<tbody>
<tr>
<td style="width: 20%;"><a style="font-family:Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><img src="images/TehNextGeneration.png" width="auto" height="35px" alt=""/></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">One Handed Practice Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Two Handed Practice Swords</b></a></td>
</tr>
</tbody>
</table>
</div>
</div>
		
		
		
		
		
		
<!---->
<div style="font-family: Centaur; font-size: 18px; color: black; position: fixed; " id="sidenav4" class="sidenav4">
<div style="width: 100%; margin-top: 6%; float: left;">	
<table>
<tbody>
<tr>
<td style="width: 20%;"><a style="font-family:Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><img src="images/TehNextGeneration.png" width="auto" height="35px" alt=""/></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Early Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Roman Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Viking Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Medieval One Handed</b></a></td>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Hand & a Half Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Medieval Two Handed</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Single Edged Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Next Generation Scabbards</b></a></td>
</tr>
</tbody>
</table>
</div>
</div>
		
		
		
		
		
		
<!---->
<div style="font-family: Centaur; font-size: 18px; color: black; position: fixed; " id="sidenav5" class="sidenav5">
<div style="width: 100%; margin-top: 6%; float: left;">	
<table>
<tbody>
<tr>
<td style="width: 20%;"><a style="font-family:Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><img src="images/TehNextGeneration.png" width="auto" height="35px" alt=""/></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">One Handed Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Two Handed Swords</b></a></td>
</tr>
<tr>
<td style="width: 20%"><a style="font-family: Centaur; color: black; width: 95%; float: left; margin-left: 0%;"><b style="float: left; margin-left: 0%;">Squire Line Scabbards</b></a></td>
</tr>
</tbody>
</table>
</div>
</div>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：1)

我相信这是因为您在每个点击事件中使用相同的功能。 

document.getElementById("myBtn").addEventListener("click", open_close);

因此，当您调用该函数时，它会调用它的最后一个实现。在您的情况下，＆＃34; myBtn5＆＃34;。

的点击事件

快速解决方法是重命名每个功能：

function open_close_1() {

然后为每个onclick事件调用另一个函数：open_close_2，依此类推。

.addEventListener("click", open_close_1);

这应该阻止它调用相同的函数。我希望这有帮助！

答案 1 :(得分：1)

我不会仅仅解决这个问题，而是试图在将来为您节省大量的麻烦。您的代码可以显着清理。内联样式和每个项目的功能将成为未来维护的噩梦。我强烈建议你走一条类似于我在下面展示的路线。值得注意的是，我留下了一些你的东西来简化它，但只要你遵循相同的模式（这是增强的可维护性的很大一部分），它将工作添加额外的项目。另外，如果这不是您想要的菜单功能，请道歉，我无法准确地从您的代码中说出，但您应该能够从这个概念构建

请参阅fiddle here

HTML 

<div class="sidenav">
  <div class="icons">
    <div class="icon">Nav 1</div>
    <div class="icon">Nav 2</div>
    <div class="icon">Nav 3</div>
  </div>
  <div class="nav-items">
      <ul class="item-set">
        <li>Early Swords</li>
        <li>Roman Swords</li>
        <li>Viking Swords</li>
        <li>Medieval One Handed</li>
        <li>Hand &amp; a Half Swords</li>
        <li>Medieval Two Handed</li>
        <li>Single Edged Swords</li>
        <li>Next Generation Scabbards</li>
      </ul>
      <ul class="item-set">
        <li>One Handed Museum Line Swords</li>
        <li>Two Handed Museum Line Swords</li>
        <li>Museum Line Scabbards</li>
      </ul>
      <ul class="item-set">
        <li>One Handed Practice Swords</li>
        <li>Two Handed Practice Swords</li>
      </ul>
  </div>
</div>

CSS 

.sidenav {
  width:350px;
}

.icons {
  width:50px;
  float:left;
}

.icons .icon:hover {
  cursor:pointer;
  text-decoration:underline;
}

.nav-items {
  width:300px;
  float:right;
}

.nav-items {
  overflow:hidden;
}

.nav-items ul {
  margin-top:0px;
  margin-left:-300px;
  display:none;
}

.nav-items li {
  list-style-type:none;
  cursor:pointer;
}

看看这个Javascript / Jquery是多么简单

$(document).ready(function()
{
  slideRight($(".item-set").eq(0));

  $(".icons .icon").click(function()
  {
    var idx = $(this).index();
    slideLeft($(".item-set"));
    slideRight($(".item-set").eq(idx));
  });
});

function slideRight(elem) {
  elem.show();
  elem.animate({ 'marginLeft': '0px' }, 100);
}

function slideLeft(elem) {
  elem.hide();
  elem.css({ 'marginLeft': '-300px' });
}

答案 2 :(得分：1)

少于10行JavaScript的无限侧导航栏

哇，这是很多代码！

我用jQuery给你写了一个小脚本，可以帮助你更有效地做你想做的事。

希望它有所帮助。

＆＃13;
＆＃13; 
$(function sideNav() {
  $('#Head a').on('click', function () {
    var link = $(this).data('nav');
    $('.' + link).toggleClass('Slide');
  });
  $('.AsideWrap').on('click', function () {
    $('.Slide').toggleClass('Slide');
  });
});
＆＃13; 
/* Side Navigation
---------------------------------*/
.AsideWrap {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all ease-in-out 0.2s;
  transition: all ease-in-out 0.2s;
  z-index: 110;
}

#Aside {
  position: absolute;
  top: 0;
  right: -200px;
  height: 100%;
  width: 200px;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  -ms-flex-align: stretch;
  -webkit-box-align: stretch;
  align-items: stretch;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  text-align: center;
  -webkit-transition: all ease-in-out 0.2s;
  transition: all ease-in-out 0.2s;
  z-index: 120;
}

#Aside a {
  -webkit-display: flex;
  -ms-display: flex;
  display: -webkit-box;
  display: flex;
  -ms-justify-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -ms-flex: 1 1 0%;
  -webkit-box-flex: 1;
  flex: 1 1 0%;
  position: relative;
  padding: 5px 10px;
  font:1em Centaur;
  color:#111;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all ease-in-out 0.2s;
  transition: all ease-in-out 0.2s;
  text-shadow: 0 0 10px rgba(0,0,0,0.3);
  text-transform: uppercase;
}

#Aside a:hover {
  background: #fff;
  color: #111;
}

.Slide {
  opacity: 1 !important;
  visibility: visible !important;
}

.Slide #Aside {
  right: 0 !important;
}

.Flx {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.Flx1 {
  -ms-flex: 1 1 0%;
  -webkit-box-flex: 1;
  flex: 1 1 0%;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header id="Head">
  <a data-nav="Link1">Link1</a>
  <a data-nav="Link2">Link2</a>
  <a data-nav="Link3">Link3</a>
  <a data-nav="Link4">Link4</a>
  <a data-nav="Link5">Link5</a>
</header>

<div class="AsideWrap Link1">
  <aside id="Aside" class="Flx Flx1">
    <a><img src="images/TehNextGeneration.png" width="auto" height="35px" alt="" /></a>
    <a>Early Swords</a>
    <a>Roman Swords</a>
    <a>Viking Swords</a>
    <a>Medieval One Handed</a>
    <a>Hand &amp; a Half Swords</a>
    <a>Medieval Two Handed</a>
    <a>Single Edged Swords</a>
    <a>Next Generation Scabbards</a>
  </aside>
</div>

<div class="AsideWrap Link2">
  <aside id="Aside" class="Flx Flx1">
    <a><img src="images/The Museum Line.png" width="auto" height="35px" alt="" /></a>
    <a>One Handed Museum Line Swords</a>
    <a>Two Handed Museum Line Swords</a>
    <a>Museum Line Scabbards</a>
  </aside>
</div>

<div class="AsideWrap Link3">
  <aside id="Aside" class="Flx Flx1">
    <a><img src="images/TehNextGeneration.png" width="auto" height="35px" alt="" /></a>
    <a>One Handed Practice Swords</a>
    <a>Two Handed Practice Swords</a>
  </aside>
</div>

<div class="AsideWrap Link4">
  <aside id="Aside" class="Flx Flx1">
    <a><img src="images/TehNextGeneration.png" width="auto" height="35px" alt="" /></a>
    <a>Early Swords</a>
    <a>Roman Swords</a>
    <a>Viking Swords</a>
    <a>Medieval One Handed</a>
    <a>Hand &amp; a Half Swords</a>
    <a>Medieval Two Handed</a>
    <a>Single Edged Swords</a>
    <a>Next Generation Scabbards</a>
  </aside>
</div>

<div class="AsideWrap Link5">
  <aside id="Aside" class="Flx Flx1">
    <a><img src="images/TehNextGeneration.png" width="auto" height="35px" alt="" /></a>
    <a>One Handed Swords</a>
    <a>Two Handed Swords</a>
    <a>Squire Line Scabbards</a>
  </aside>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：1)

嗨，请尝试以下示例。

<强> HTML： 

    <div class="sidebar sidebar-1 hidden">
  <h3>
Sidebar 1
</h3>
  <ul>
    <li>One</li>
    <li>Two</li>
  </ul>
</div>
<div class="sidebar sidebar-2 hidden">
  <h3>
Sidebar 2
</h3>
  <ul>
    <li>One</li>
    <li>Two</li>
  </ul>
</div>

<button id="btn-1">One</button>
<button id="btn-2">Two</button>

<强> CSS： 

.hidden {
  display: none;
}

.active {
  display: block;
}

脚本： 

$('button').on('click', function() {
  var btnElement = $(this).attr('id').split('-');
  showSidebar(btnElement[1]);
});

function showSidebar(elem) {
  var sidebar = $(document).find('.sidebar-' + elem);
  $(document).find('.sidebar').addClass('hidden').removeClass('active');
  $(document).find('.sidebar-' + elem).removeClass('hidden').addClass('active');
}

Fiddle Demo

相关问题
最新问题