jQuery - 单击列表项更改div类

时间:2013-06-16 14:04:44

标签: javascript jquery html image replace

我的代码有问题,因为它目前无法运行! 问题是它没有按照我的意愿行事。这是在单击<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>

所以,这有一些问题。首先,单击地址时类不会更改。其次,这实际上删除了我的页面上除列表中的链接之外的所有链接的使用。这意味着导航栏等。

任何帮助,非常感谢!我无法理解......

0 个答案:

没有答案