0
どのアンカーが選択されているかによって、異なるコンテンツを提供するアンカータグを使用しているメニューがあります。メニューアイテムが起動されると、リンク上のハッシュをブラウザのURLのハッシュと照合することによって、アクティブなクラスが親に追加されます。jQueryハッシュ変更がモバイルで起動しない
すべてはデスクトップ上では完全に機能しますが、モバイルに移行するとそれは起動しません。次のように
コードは次のとおりです。
$(window).on('hashchange', function(e) {
if ($('.menu-item').hasClass('active')) {
$(".menu-item").removeClass("active");
$('[href$="' + window.location.hash + '"]').parent(this).addClass("active");
}
});#artistNavigation {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
text-align: left;
width: 100%;
height: auto;
margin: 0 auto;
position: relative;
font-family: "Oswald", sans-serif;
box-shadow: 0 1px 0 0 #ddd;
-webkit-box-shadow: 0 1px 0 0 #ddd;
}
@media (max-width: 1000px) {
#artistNavigation {
padding-top: 50px;
width: calc(100% - 60px);
position: relative;
}
#artistNavigation.open li.menu-item {
display: block;
}
}
#artistNavigation li {
display: inline-block;
*display: inline;
zoom: 1;
text-align: left;
vertical-align: middle;
padding-right: 45px;
position: relative;
/*active state*/
}
@media (max-width: 1000px) {
#artistNavigation li {
display: block;
text-align: center;
}
#artistNavigation li.mobi {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 30px;
z-index: 99;
}
#artistNavigation li.menu-item {
display: none;
list-style-type: none;
}
#artistNavigation li.active {
display: block !important;
position: absolute;
top: 0;
left: 0;
right: 70px;
height: 30px;
z-index: 89;
display: block;
background: #fff;
}
#artistNavigation li.active a {
-webkit-transform: translateX(35px);
transform: translateX(35px);
}
}
#artistNavigation li a {
-webkit-transition: color 200ms ease;
-moz-transition: color 200ms ease;
-o-transition: color 200ms ease;
-ms-transition: color 200ms ease;
transition: color 200ms ease;
display: inline-block;
*display: inline;
zoom: 1;
padding: 17px 0;
text-align: center;
font-size: 12px;
line-height: 15px;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
color: #b2b2b2;
position: relative;
border-bottom: solid 2px transparent;
}
@media (max-width: 1000px) {
#artistNavigation li a {
padding: 1rem 0;
}
}
#artistNavigation li a,
#artistNavigation li a:visited,
#artistNavigation li a:active,
#artistNavigation li a:link {
color: #b2b2b2;
}
#artistNavigation li:hover > a,
#artistNavigation li:focus > a,
#artistNavigation li.active a {
color: #000;
border-bottom: solid 2px #25cbd3;
}
#artistNavigation li.pdf {
position: absolute;
right: 0;
top: 12px;
padding-right: 0;
text-transform: uppercase;
font-size: 12px;
color: #25cbd3;
padding-bottom: 16px;
border-bottom: solid 2px transparent;
}
#artistNavigation li.pdf:hover {
cursor: pointer;
color: #454545;
}
@media (max-width: 1000px) {
#artistNavigation:hover,
#artistNavigation:focus {
height: auto;
}
#artistNavigation li:active {
position: absolute;
top: 0;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="art-nav" role="navigation">
<div class="artist-nav-box">
<ul id="artistNavigation">
<li class="menu-item active"><a href="#Commercial">Commercial</a>
</li>
<li class="menu-item"><a href="#Fashion">Fashion</a>
</li>
<li class="menu-item"><a href="#Lifestyle">Lifestyle</a>
</li>
<li class="menu-item"><a href="#Portaits">Portaits</a>
</li>
<li class="menu-item"><a href="#Places">Places</a>
</li>
<li class="menu-item"><a href="#Animals">Animals</a>
</li>
<li class="menu-item"><a href="#Great-White-Shark">Great White Shark</a>
</li>
<li class="menu-item"><a href="#Panoramics">Panoramics</a>
</li>
<li class="menu-item"><a href="#Masai">Masai</a>
</li>
</ul>
</div>
</nav>私はそれが私が行方不明です単純なものであると確信している、SASS生成されたCSSを言い訳してください。