1.点击单个标签,添加或删除类名
可以用在:开发手机端页面时,头部的导航的显示隐藏以及图标的改变;
下面代码为例:(部分无关紧要的代码有删除,但不影响效果)
HTML
<div id="m_header" class="m_header">
<div class="m_header_box">
<div class="container_me">
<div class="header_top">
<div class="headerTop_box">
<div class="header_logo">
<a href="###">
<img class="logo" src="img/logo_home.png" />
</a>
</div>
<div class="navIcon">
<div class="nav_line nav_line1"></div>
<div class="nav_line nav_line2"></div>
<div class="nav_line nav_line3"></div>
</div>
</div>
</div>
</div>
</div>
<div class="m_menu" id="m_menu">
<div class="m_menu_box">
<ul>
<div class="m_nav_link">
<a href="/">
<span class="b_Item">HOME</span>
<img src="img/icon/jiantou.png">
</a>
</div>
<div class="m_nav_link">
<a href="/products/">
<span class="b_Item">OTHER PRODUCTS</span>
<img src="img/icon/jiantou.png">
</a>
</div>
</ul>
</div>
</div>
</div>
JS
点击图标按钮,分别给图标和菜单添加类名为line_move
和show
。
当点击的时候先判断是否已经添加过类名,有就删除,没有就添加,这就可以正常控制图标的变化以及菜单的显示与隐藏。
注:这里的显示隐藏我是由div的高度来控制的。
$(".navIcon").click(function() {
if($(".navIcon").hasClass("line_move")) {
$(".navIcon").removeClass('line_move');
} else {
$(".navIcon").addClass('line_move');
}
if($(".m_menu").hasClass("show")) {
$(".m_menu").removeClass('show');
} else {
$(".m_menu").addClass('show');
}
});
CSS
添加类名line_move
和show
之后,样式作出修改。
图标:点击前是三条线,点击后先将第二条线隐藏,其余两条分别作出相应的旋转来达到想要的页面效果;
菜单:点击前height:0;
,点击后height:1400px;
(点击后的高度根据需要来设定);
/*图标代码*/
.navIcon .nav_line{
width: 35px;
height: 3px;
background-color: #e73299;
border-radius: 10px;
transition: all 0.4s;
}
.navIcon .nav_line1{
transform-origin: left top 0;
margin-bottom: 9px;
}
.navIcon .nav_line2{
margin-bottom: 9px;
}
.navIcon .nav_line3{
transform-origin: left bottom 0;
}
.navIcon.line_move .nav_line{
transition: all 0.4s;
}
.navIcon.line_move .nav_line1{
transform: rotate(45deg);
}
.navIcon.line_move .nav_line2{
opacity: 0;
}
.navIcon.line_move .nav_line3{
transform: rotate(-45deg);
}
/*导航菜单*/
.m_menu{
width: 100%;
height: 0;
background-color: #fdfdfd;
overflow-y: scroll;
transition: all 1s;
}
.m_menu::-webkit-scrollbar {
display: none;
}
.m_menu.show{
height: 1400px;
}
.m_menu_box{
width: 90%;
margin: 0 auto;
}
效果图如下:
- 点击前:
- 点击后:
2. 点击多个标签,根据点击的哪个来添加或删除类名
HTML
<div class="about_menu">
<div class="aboutMenu_box">
<ul>
<li class='active'>
<a href='###'>品牌介绍</a>
</li>
<li>
<a href="###">一站式解决方案</a>
</li>
<li>
<a href="###">企业宣传片</a>
</li>
</ul>
</div>
</div>
JS
点击哪个就为哪个添加类名:active
,并删除其兄弟元素的类名。
注:这里的显示隐藏我是由div的高度来控制的。
<script type="text/javascript">
$(function() {
$(".aboutMenu_box li").bind("click", function() {
$(this).siblings('li').removeClass('active'); //删除其他兄弟元素的类名
$(this).addClass('active');
});
})
</script>
CSS
添加类名active
之后,样式作出修改。
.about_menu {
width: 100%;
background-color: #f2f2f2;
}
.aboutMenu_box {
max-width: 1200px;
margin: 0 auto;
}
.about_menu ul li {
display: inline-block;
}
.about_menu a {
display: inline-block;
color: #333;
font-size: 15px;
line-height: 60px;
padding: 0 30px;
}
.about_menu a:hover {
background-color: #e73299;
color: #fff;
}
.about_menu li.active a {
background-color: #e73299;
color: #fff;
}
效果图如下:
- 点击前(默认样式):
- 点击后:
jq可在此下载:https://www.jb51.net/zt/jquerydown.htm
如有错误请各位大神评论指教……