Question

我在一个名为div A的div中有两个链接。当单击链接1时，会显示一个带有一些信息的div（div B），当单击链接2时，会显示另一个div（div C）。这是使用jquery的show / hide。

完成的

我希望所选链接的颜色发生变化，然后在点击其他链接后仅返回。因此，突出显示用户当前正在查看的链接。

有没有人知道如何通过Jquery甚至PHP实现此链接颜色更改。谢谢。非常感谢所有帮助。

的Javascript

    $("#link1").click(function() {
    $("#Div b").hide();
    $("Div c").show();
    });

    $("#link2").click(function() {
    $("#Div b").hide();
    $("#Div c").show();
    });

HTML

<div id="div a">
<a href="javascript:void(0);" class="links" id="link1"></a>
<a href="javascript:void(0);" class="links" id="link2"></a>
</div>

Answer 1

以下解决方案依赖于ajax链接。它不适用于标准链接（意味着它们往返于服务器并替换页面）。

var i_color = '#FFOOOO';
var o_color = '#0000FF';

$('#div_a').delegate('.link', 'click', function(event){
  var $this = $(this);
  $this.css({color : i_color})
       .siblings()
       .css({ color : o_color })
})

要在静态页面环境中完成专长，您可能希望简单地使用:active css伪选择器。

// css file
.link:link {
  color : #0000FF;
}
.link:active {
  color : #FF0000;
}

Answer 2

您需要直接使用CSS

$("#link1").click(function() 
{
    $("#Div b").hide();
    $("Div c").show();
    $(this).css('color', '#f00');
});

$("#link2").click(function() 
{
    $("#Div b").hide();
    $("#Div c").show();
    $(this).css('color', '#00f');
});

或在CSS中定义

a.class1
{
    color: #f00;
}

a.class2
{
    color: #00f;
}

然后像这样使用它：

$("#link1").click(function() 
{
    $("#Div b").hide();
    $("Div c").show();
    $(this).toggleClass('class1');
});

$("#link2").click(function() 
{
    $("#Div b").hide();
    $("#Div c").show();
    $(this).toggleClass('class2');
});

Answer 3

您可以使用：

$("#link1").css("color","yourcolor");

然后在你打电话给另一个时再改回来。

Answer 4

您可以尝试这样的事情：

<style type='text/css'>
  .highlighted { color: red; }
</style>
<script type='text/javascript'>
  $("#link1").click(function() {     
    $("#Div b").hide();
    $("Div c").show();
    $('.highlighted').removeClass('highlighted');
    $(this).addClass('highlighted');  
  });      

  $("#link2").click(function() {
    $("#Div b").hide();
    $("#Div c").show();
    $('.highlighted').removeClass('highlighted');
    $(this).addClass('highlighted');  

  });
</script>

Answer 5

我建议为活动链接创建一个css类，例如'active'，然后使用jquery将其分配给正确的链接，同时在另一个上禁用它。 e.g：

的CSS：

.active{
/* Some distinguishing style here */
}

JS：

$("#link1").click(function() {
$("#Div b").hide();
$("Div c").show();
$('.active').removeClass('active');
$('#link1').addClass('active');
});

$("#link2").click(function() {
$("#Div b").hide();
$("#Div c").show();
$('.active').removeClass('active');
$('#link2').addClass('active');
});

Answer 6

你可以这样做：

$("#link1").click(function() {
    $(".links").removeClass("special-color");
    $("#link1").addClass("special-color");
    $("#Divb").show();
    $("#Divc").hide();
});

$("#link2").click(function() {
    $(".links").removeClass("special-color");
    $("#link2").addClass("special-color");
    $("#Divb").hide();
    $("#Divc").show();
});

然后将这样的内容添加到你的css中：

a.special-color {
    color: #FF5E99; /* hot pink */
}

此外，HTML中的ID不能包含空格，因此您应该将div ID更改为不带空格的内容。

如何在点击后更改链接的颜色，然后在单击其他链接后将其更改回来？

6 个答案: