保持活动链接（框）突出显示答案

【问题标题】：Keep active link (box) highlighted保持活动链接（框）突出显示
【发布时间】：2014-10-07 21:54:10
【问题描述】：

我正在使用包含图像和标题的“框”（实际上是列表元素）进行导航。通过将鼠标悬停在它上面，盒子会收到一个阴影，以更好地突出盒子。单击后，我希望以相同的方式突出显示该框。

我设法让一个小的 jQuery 脚本以这种方式工作，只有部分 CSS。 CSS 有点缺陷，我看不出如何使它正常工作。这是代码下方的a fiddle。 “.active”类位于 CSS 列表的底部。

    <div class="explore">
        <div class="explore_body">
            <ul id="nav">
                <li><a href="#!" ><img src="http://geg.informea.org/wp-content/themes/geg/images/air_pollution.png" /></a><a href="#!" class="album_title">Air pollution and air quality</a></li>
                <li><a href="#!" ><img src="http://geg.informea.org/wp-content/themes/geg/images/biodiversity.png"/></a><a href="#!" class="album_title">Biodiversity</a></li>
            </ul>
        </div>      
    </div>

CSS：。探索 { 左边距：自动；边距右：自动；宽度：70%；边距顶部：20px； }

    .explore_body {
      width: 100%;
      /* border: 1px solid #f00; */
      padding-bottom: 5px;
      padding-top: 5px;
      clear: both;
      background: #F4F4F4;
      *background: #F4F4F4; /* star hack to target IE6 & 7*/
    }

    .explore_body ul {
      margin: 5px;
      padding-top: 5px;
      clear: both;
      width: 100%;
    }

    .explore_body ul li {
      display: inline-block; /*IE7 doesn't support inline-block */
      zoom: 1;
      *display: inline; /* star hack to target IE6 & 7*/
      /* background: url(images/album.png); */
      width: 130px;
      height: 145px;
      margin: 5px 5px;
    }

    .explore_shadow {
      width: 100%;
      height: 20px;
      /* background: url(images/explore_shadow.png) no-repeat; */
    }

    .explore_body ul li img {
      width: 120px;
      height: 100px;
      margin: 5px 0px 5px 5px;
    }

    .explore_body ul li {
      opacity: 0.9;
      filter:alpha(opacity=90); /* For IE8 and earlier */
    }

    .explore_body ul li:hover {
      opacity: 1;
      filter:alpha(opacity=100); /* For IE8 and earlier */
      -webkit-box-shadow: 3px 3px 3px 3px #666;
    }       

    .explore_body ul li:selected {
      opacity: 1;
      filter:alpha(opacity=100); /* For IE8 and earlier */
      -webkit-box-shadow: 3px 3px 3px 3px #666;
    }       


    .album_title {
      display: inline-block;
      float: left;
      margin-top: 0px;
      margin-left: 5px;
      color: #3c72d2;
      font-weight: bold;
      max-width: 140px;
      text-align: left;
      clear: both;
    }

    .album_title:hover {
      color: #1F3D6F;
    }

    .active {
      display: inline-block; /*IE7 doesn't support inline-block */
      zoom: 1;
      *display: inline; /* star hack to target IE6 & 7*/
      /* background: url(images/album.png); */
      width: 130px;
      height: 135px;
      opacity: 1;
      filter:alpha(opacity=100); /* For IE8 and earlier */
      -webkit-box-shadow: 3px 3px 3px 3px #666;
    }

jQuery:

        $(function () {
        $("#nav li a").click(function (e) {
            e.preventDefault();
            $("#nav li a").addClass("active").not(this).removeClass("active");
        });
    });

感谢您在找出正确的 CSS 方面的任何帮助。

【问题讨论】：

标签： jquery html css

【解决方案1】：

你应该定位父元素而不是a标签，所以修改你的脚本

$(function () {
    $("#nav li a").click(function (e) {
        e.preventDefault();
        $("#nav li a").parent().addClass("active").not($(this).parent()).removeClass("active");
    });
});

Demo

另外，如果您看到，方框阴影触及文本的底部，因此看起来不专业，为了解决这个问题，请将 padding-bottom: 10px; 分配给 .explore_body ul li

Demo 2

【讨论】：

非常感谢！伟大的！是的，影子触摸文本只是在小提琴中，而不是在我的在线版本中。
我在该行中使用的（第二个）链接似乎不再适用于上述建议的解决方案。也就是说：我在屏幕上的同一行中有一个 jquery 链接和一个外部链接（带有图像标签）。外部的不再起作用了。 Here is the fiddle. 感谢您的任何建议。
@luftikus143 你在找这样的东西吗？ fiddle.jshell.net/Ljh96fo7/3
这正是我想要的。

【解决方案2】：

jQuery 查找页面完成加载之前的 CSS。将此代码用作您的第一行：

    $( document ).ready( function() {

【讨论】：