我的代码有问题，因为它目前无法正常工作！问题是它没有做我想要的。即在<li>单击列表中的链接时更改图像。当点击链接到链接中定义的类时，图像包装器 div 标签的类想要更改。我有以下内容：
<div class="span3">
<h4 style="line-height: 0px; text-decoration: ; color: #060; display:inline;"><i class="icon-angle-right" style="display:inline;"> Our Offices</i></h4>
<li><a href="#mg-london">
<address>
<strong>Head Office - London</strong><br />
Suite 304, Crown House<br />
North Circular Road<br />
London NW10 7PN<br />
<abbr title="Phone">P:</abbr> 020 8961 2632<br>
</address>
</a></li>
<li><a href="#mg-sheffield">
<address>
<strong>Northern Office</strong><br />
133 Abbeydale Road<br />
Sheffield<br />
S7 1FE<br />
<abbr title="Phone">P:</abbr> 0114 438 8047<br>
</address>
</a></li>
</div><!-- span3 -->
<div class="span3">
<h4 style="line-height: 0px; text-decoration: ; color: #060; display:inline;"><i class="icon-angle-right" style="display:inline;"> Our Stores</i></h4>
<li><a href="#mg-dewsbury">
<address>
<strong>Dewsbury</strong><br />
102 Pionier House<br />
Halifax Road<br />
WF13 4JJ<br />
<abbr title="Phone">P:</abbr> 0192 445 9740<br>
<abbr title="Email">@:</abbr> Dewsbury@familiesrelief.org.uk
</address>
</a></li>
<li><a href="#mg-birmingham">
<address>
<strong>Birmingham</strong><br />
517 Moseley Road<br />
Birmingham<br />
B12 9BX<br />
<abbr title="Phone">P:</abbr> 0121 440 8840<br>
<abbr title="Email">@:</abbr> Birmingham@familiesrelief.org.uk
</address>
</a></li>
</div><!-- span3 -->
<div class="span3" style="margin-top: 22px;">
<li><a href="#mg-ealing">
<address>
<strong>Ealing</strong><br />
93 The Broadway<br />
West Ealing<br />
W13 9BP<br />
<abbr title="Phone">P:</abbr> 0208 567 3399<br>
<abbr title="Email">@:</abbr> Ealing@familiesrelief.org.uk
</address>
</a></li>
<li><a href="#mg-halifax">
<address>
<strong>Halifax</strong><br />
Diversity Project<br />
198 Queens Road<br />
HX1 4NE<br />
<abbr title="Phone">P:</abbr> 0142 232 2550<br>
<abbr title="Email">@:</abbr> Halifax@familiesrelief.org.uk
</address>
</a></li>
</div>
<div class="span3" style="margin-top: 22px;">
<li><a href="#mg-greenford">
<address>
<strong>Greenford</strong><br />
64 The Broadway<br />
Ruislip Road<br />
Greenford UB6 9QJ<br />
<abbr title="Phone">P:</abbr> 0208 578 9080<br>
<abbr title="Email">@:</abbr> Greenford@familiesrelief.org.uk
</address>
</a></li>
<li><a href="#mg-sheffield">
<address>
<strong>Sheffield</strong><br />
Al Shifa Charity Shop<br />
133 Abbeydale Road<br />
Sheffield S7 1FE<br />
<abbr title="Phone">P:</abbr> 0114 438 8047<br>
<abbr title="Email">@:</abbr> Sheffield@familiesrelief.org.uk
</address>
</a></li>
</ul>
</div>
剧本：
$('ul li a').on('click', function(e) {
e.preventDefault();
var cl = $(this).attr('href').replace('#','');
$('.map-wrapper').removeClass().addClass('map-wrapper '+cl);
});
两个类的css：
.mg-sheffield {
background-image: url(../img/map/sheffield.png);
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src=//ssl.gstatic.com/s2/oz/images/local/map_gradient.png, sizingMethod=scale)";
background: -webkit-linear-gradient(top, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map/sheffield.png);
background: -moz-linear-gradient(top, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map/sheffield.png);
background: -ms-linear-gradient(bottom, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map/sheffield.png);
background: -o-linear-gradient(bottom, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map/sheffield.png);
background: linear-gradient(bottom, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map/sheffield.png);
background-position: center;
height: 250px;
max-height: 250px;
max-width: 1600px;
}
.mg-dewsbury {
background-image: url(../img/map/dewsbury.png);
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src=//ssl.gstatic.com/s2/oz/images/local/map_gradient.png, sizingMethod=scale)";
background: -webkit-linear-gradient(top, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map/dewsbury.png);
background: -moz-linear-gradient(top, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map/dewsbury.png);
background: -ms-linear-gradient(bottom, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map/dewsbury.png);
background: -o-linear-gradient(bottom, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map/dewsbury.png);
background: linear-gradient(bottom, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map/dewsbury.png);
background-position: center;
height: 250px;
max-height: 250px;
max-width: 1600px;
}
和图像包装器：
<div class="map-wrapper mg-sheffield"></div>
所以，这有几个问题。首先，点击地址时类不会改变。其次，这实际上删除了我页面上所有链接的使用，而不是列表中的链接。这意味着导航栏等。
任何帮助，非常感谢！我想不通。。