jquery在点击时高亮显示链接

bnlyeluc  于 2023-11-17  发布在  jQuery
关注(0)|答案(8)|浏览(123)

如何使用jquery在点击链接时突出显示链接?
例如,当我点击链接class1_1时,我想将此链接设置为红色(或其他颜色)。
这里的JavaScript代码:

<script type="text/javascript">
 $(function(){
  $("#menu li").each(function(){
     $(this).click(function(event){
       var ul=$(this).children("ul")
       var span = $(this).children("span")
       if(ul.html()!=null)
       {
          if(ul.css("display")=="none")
          {
            ul.css("display","block");
            span.addClass("up")
          }else
          {
            ul.css("display","none")
            span.removeClass("up")
          }
           event.stopPropagation();
       }else
       {
         event.stopPropagation();
       }
     });
  });
  return false;
 });
</script>

字符串
这里的html代码:

<ul id="menu">

<li class="title"><span>class1 </span>
<ul>
  <li><a href="">class1_1</a></li>
   <li><a href="">class1_2</a></li>
 </ul>
 </li>
<li class="title"><span>class2</span>
   <ul>
  <li><span>class2_1</span>
   <ul>
    <li><a href="">class2_1_1</a></li>
    <li><a href="">class2_1_1</a></li>
  </ul>
  </li>
 </ul>
</li>
</ul>


也许我不能解释清楚我的问题,我的意思是最后一个onclick链接使它
颜色为红色,另一个链接设置为默认颜色

0sgqnhkj

0sgqnhkj1#

可以使用CSS,不需要jQuery:
亮点:

a:active {
    background-color: #FF0000;
}

字符串
更改链接颜色:

a:active {
    color: #FF0000;
}


编辑:回复您的评论.如果您的链接没有将浏览器引导到另一个页面,您可以使用Mike罗宾逊的答案来实现相同的效果,而无需离开页面,也无需将颜色更改回默认的模糊。

pxq42qpu

pxq42qpu2#

我认为这样就可以了,虽然我现在手头上没有jquery。假设'up'是一个让你的链接变红的类:

$("ul#menu a").click(function(){
 $(this).addClass('up');
});

字符串

azpvetkf

azpvetkf3#

这应该是可行的:

JavaScript:

$(function(){
    $('.class1').click(function() {
        $(this).toggleClass('active1');
    });
});

字符串
CSS:

a.class1 { color: red; }
a.active1 { color: blue; }


超文本标记语言:

<a href="#" class="class1">some text</a>


最好使用toggleClass(2 in 1)而不是addClass/removeClass。

yiytaume

yiytaume4#

我推荐http://plugins.jquery.com/project/colorjquery.color插件,它允许你在各种html元素上设置颜色动画。

wkyowqbh

wkyowqbh5#

<script type = "text/javascript" >
$(function() {
    $("#menu li").each(function() {
        $(this).click(function(event) {

            $("#menu li").removeClass("high");
            $(this).addClass("high");

            var ul = $(this).children("ul")
            var span = $(this).children("span")
            if (ul.html() != null) {
                if (ul.css("display") == "none") {
                    ul.css("display", "block");
                    span.addClass("up")
                } else {
                    ul.css("display", "none") span.removeClass("up")
                }
                event.stopPropagation();
            } else {
                event.stopPropagation();
            }
        });
    });
    return false;
});
</script>

<style>
.high{color:red}
</style>

字符串

j91ykkif

j91ykkif6#

JavaScript:

$('.link').click(function() {
    if (!$(this).hasClass('hi')) {
        // If this link is not already highlighted, highlight it and make
        // sure other links of class .link are not highlighted.
        $('.hi').removeClass('hi');
        $(this).addClass('hi');
    }
});

字符串
css:

a.hi { color: red; }


html:

<a href="#" class="link">my text</a>
<a href="#" class="link">that text</a>
<a href="#" class="link">this text</a>

4urapxun

4urapxun7#

你可以使用CSS伪类active来实现,它为激活的元素添加特殊的样式。
例如,您可以这样做:

a: active { color: red; }

字符串
注意,a:active必须在CSS定义中的a:hover之后才能有效!!

guz6ccqo

guz6ccqo8#

var base = window.location.pathname.substring(1);
var links="";
$('a').click(function(){
    links = $(this).attr('href');
    localStorage.setItem(base, links);
});

字符串
$('a [href=“”+localStorage.getItem(base)+'“存储”).focus();

相关问题