Javascript jQuery-单击列表项更改div类

我的代码有问题，因为它当前不工作！ 问题是它没有达到我想要的效果。即单击

列表中的链接时更改图像。 当单击链接到链接中定义的类时，图像包装器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>

其中两个类的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>

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

---

任何帮助，非常感谢！我想不出来。

我在你发布的内容中没有看到任何

标签。有一个

，但是里面有很多无效的标记。您不能将

直接嵌套在

中-元素的唯一直接子元素应该是

元素。您应该修改html并用它编辑问题。

<div class="map-wrapper mg-sheffield"></div>