我使用下面的jquery来显示/隐藏三个单独的侧边栏。目前,该脚本仅将该类添加到相关侧栏,并在另一次单击时将其删除。首先,我的脚本似乎不是实现这一目标的最简化的方法,而且我还想确保在任何时候只有一个侧边栏可以处于活动状态。
作为奖励,我还想在相关的侧边栏中添加一个.active类到相关的菜单项。
任何帮助非常感谢!
HMTL
<nav>
<ul>
<li class="artists"><a href="#">Artists</a></li>
<li class="about"><a href="#">About</a></li>
<li class="history"><a href="#">History</a></li>
</ul>
</nav>
<aside class="sidebar artists">
<li><h3><a href="#">Artist Name</a></h3></li>
</aside>
<aside class="sidebar about">
<h5>Biographical content</h5>
</aside>
<aside class="sidebar history">
<h5>Historical content</h5>
</aside>
SCSS
/* Main nav */
nav {
float: right;
margin-top: 3px;
ul {
margin: 0;
height: 0;
}
ul li {
display: inline-block;
margin-right: 35px;
}
}
.sidebar {
width: 50%;
height: 100%;
position: fixed;
top: 0;
right: 0;
margin-right: -50%;
background: $black;
}
.sidebar.artists.active,
.sidebar.about.active,
.sidebar.history.active {
margin-right: 0;
}
JS
$(function() {
$( ".artists" ).click(function() {
$( ".sidebar.artists" ).toggleClass( "active" );
});
});
$(function() {
$( ".about" ).click(function() {
$( ".sidebar.about" ).toggleClass( "active" );
});
});
$(function() {
$( ".history" ).click(function() {
$( ".sidebar.history" ).toggleClass( "active" );
});
});
答案 0 :(得分:2)
试试这个:
HTML:
<ul>
<li class="artists"><a href="#">Artists</a></li>
<li class="about"><a href="#">About</a></li>
<li class="history"><a href="#">History</a></li>
</ul>
<aside class="sidebar artists">
<li><h5>Artist Name</h5></li>
</aside>
<aside class="sidebar about">
<h5>Biographical content</h5>
</aside>
<aside class="sidebar history">
<h5>Historical content</h5>
</aside>
CSS:
.active{
color:red;
font-size:25px;
font-weight:bold;
}
/* Main nav */
nav {
float: right;
margin-top: 3px;
ul {
margin: 0;
height: 0;
}
ul li {
display: inline-block;
margin-right: 35px;
}
}
.sidebar {
width: 50%;
height: 100%;
position: fixed;
top: 0;
right: 0;
margin-right: -50%;
background: $black;
}
.sidebar.artists.active,
.sidebar.about.active,
.sidebar.history.active {
margin-right: 0;
}
JS:
$('li').click(function() {
var subMenu = $(this).attr('class').substring(-1,7);
$("aside.sidebar").removeClass('active');
if ( !$( this ).hasClass( 'active' ) ) {
$("aside."+subMenu).addClass('active');
}
$(this).siblings().removeClass('active');
$(this).toggleClass('active');
});
答案 1 :(得分:1)
使用$(this)
例如:
$(function() {
$( ".artists" ).click(function() {
$( ".artists" ).not($( this )).removeClass( "active" );
$( this ).toggleClass( "active" );
});
});
答案 2 :(得分:1)
您可以像这样使用addClass和removeClass:
$('nav li').on('click',function(e){
e.preventDefault();
//first remove active class from lists and aside elements
$('nav li, aside').removeClass('active');
//add active class on clicked menu item
$(this).addClass('active');
//add active class on relevant aside element
var itemClass = this.classList;//eg. artists active
$('aside.'+itemClass[0]).addClass('active');//eg. add active on aside.artists
});
.active{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li class="artists"><a href="#">Artists</a></li>
<li class="about"><a href="#">About</a></li>
<li class="history"><a href="#">History</a></li>
</ul>
</nav>
<aside class="sidebar artists">
<li><h3><a href="#">Artist Name</a></h3></li>
</aside>
<aside class="sidebar about">
<h5>Biographical content</h5>
</aside>
<aside class="sidebar history">
<h5>Historical content</h5>
</aside>
答案 3 :(得分:1)
试试这个:你可以为所有菜单lis添加公共类,让我们说menu
,如下面的html所示。注册一个单击处理程序并切换侧边栏的活动类,其菜单与菜单li相同。同时删除其他边栏的活动类。
HTML:
<ul>
<li class="artists menu"><a href="#">Artists</a></li>
<li class="about menu"><a href="#">About</a></li>
<li class="history menu"><a href="#">History</a></li>
</ul>
jQuery:
$(function() {
$( "li.menu" ).click(function() {
var className = $(this).attr('class').replace(' menu','');
$( ".sidebar." + className ).toggleClass( "active" );
//remove active class from all other sidebar
$(".sidebar").not( ".sidebar." + className ).removeClass('active');
//add active class to menu clicked
$(this).addClass( "active" );
});
});
<强> JFFiddle Demo 强>
答案 4 :(得分:0)
$('ul li').click(function(){
$('aside').hide().filter('.'+$(this).attr('class')).show();
$(this).addClass('active');
})