Question

如何在以下场景中突出显示活动链接？

我给了.spcusr:hover, .spcusr:active{color:#adsder;}

在这种情况下，悬停属性有效但活动属性不起作用，因为它不是静态链接。无论如何，我可以显示不同颜色的活动跨度？ thnaks

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(function() {
        $( "#accordion" ).accordion({
            autoHeight: false,
            collapsible: true,
            navigation: true
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function () {
        window.showim = function(src) {
            $("#divcont").html(src);
        };
    });
</script>
<h3>
    <a href="#" style="height:200px;">
        <img src="unitedstates.jpg" width="100%" alt=""/>
    </a>
</h3>
<div>
    <span class="spcusr" onclick="showim('<h1>This is active now</h1>');">CLICK ME</span>
    <span class="spcusr" onclick="showim('<h1>This is active now</h1>');">CLICK ME</span>
    <span class="spcusr" onclick="showim('<h1>This is active now</h1>');">CLICK ME</span>
</div>
<div id="divcont"></div>

Answer 1

这是 FIDDLE

.active {
  background: #ddd;
}

$(function() {
  $('.spcusr').click(function() {
    $(this).addClass('active').siblings('.spcusr').removeClass('active');
  });
});

当然，您可以为HTML中的当前活动范围设置活动类

<span class="spcusr active" onclick="showim('<h1>This is active now</h1>');">CLICK ME</span>
<span class="spcusr" onclick="showim('<h1>This is active now</h1>');">CLICK ME</span>
<span class="spcusr" onclick="showim('<h1>This is active now</h1>');">CLICK ME</span>

Answer 2

CSS不可能使用jquery。

创建一个单独的活动类，并在单击函数命中时添加它。

$('.spcusr').click(function () {        
     $('.spcusr').removeClass('active');
    $(this).addClass('active');     
});

<强>样本

Answer 3

<强> CSS

.active{color:#cdcdcd}

<强> Jquery的

$(document).ready(function() {
  $('.spcusr').click(function() {
    $('.spcusr').removeClass('active');
    $(this).addClass('active');
  });
});

Answer 4

根据您当前的标记和js：

onclick="showim('<h1>This is active now</h1>', this);"
//---------------------------------------------^^^^---pass current el here

$(document).ready(function () {
   window.showim = function(src, el) { //<----get it here
       $(el).addClass('active').siblings('.spcusr').removeClass('.active');
       $("#divcont").html(src);
   };
});

css中的

执行此操作：

.spcusr:hover, 
.spcusr.active{
     color:#adsder;
}

Answer 5

使用jquery

为活动链接添加单独的类

轻松突出活动链接的方法

5 个答案: