我的代码有问题,因为它目前无法运行!
问题是它没有按照我的意愿行事。这是在单击<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>
所以,这有一些问题。首先,单击地址时类不会更改。其次,这实际上删除了我的页面上除列表中的链接之外的所有链接的使用。这意味着导航栏等。
任何帮助,非常感谢!我无法理解......