单击特定ul li链接时更改徽标

时间:2014-02-13 19:25:15

标签: javascript jquery html

在客户希望根据点击的类别和子类别链接更改标题徽标的网站上工作。

因此,如果用户在Kathryn Wilson及其子猫(鞋子,服装)上,Kathryn Wilson徽标将显示在kwlogo中。当用户在威尔逊小姐及其子猫(鞋子,服装)上时,威尔逊小姐的标志将在kwlogo中取代。

  • 凯瑟琳威尔逊
    • 服装
  • 威尔逊小姐
    • 服装

这是我一直在使用的代码,但似乎无法使其正常工作

<script type="text/javascript">

$(window).load(function() {
    if ( $('ul.categorymenulevel li a[title="Kathryn Wilson"]').siblings().size() > 0 ) {
        $('#kwlogo').show();
    }
    else if ( $('ul.categorymenulevel li a[title="Miss Wilson"]').siblings().size() > 0 ) {
        $('#kwlogo').css({
            'background-image' : 'url(/user/files/logo_misswilson.jpg)',
            width : '115px',
            height : '63px',
        });
        $('#kwlogo').attr("href", "/category/miss-wilson/2.aspx")
        $('#kwlogo').show();
    }
    else {
        $('#kwlogo').show();
    }
});
</script>

任何助理都将不胜感激

2 个答案:

答案 0 :(得分:0)

您可以在加载时找出网页的URL,然后查看该网页是否包含特定文字。

var url = document.URL;

如果url的文字为“kathryn-wilson”,请执行此操作。

如果url的文字为“miss-wilson”,请执行此操作。

答案 1 :(得分:0)

很抱歉,但是这段代码真的没有意义......我现在试图将它清理干净一段时间,但是有点丢失了。

  • 你的kwlogo在哪里?通过Css它是一个div,但你给它分配了href。
  • 当你点击它时,你有一个href的意思,页面将被加载,所以当你真正打开一个新页面时,你想如何显示一个新的logo ...
  • 如果每个链接都有静态页面,那么只需包含正确的图像
  • 如果您想要动态页面,而不是重新加载整个页面,那么您不应该使用href,或者如果您使用href而不是使用不健康的iframe指定目标。 所以尽我所能,你需要在我帮助你之前清理你想要的东西。

好的,我尽力清理它并给它一些意义,也尝试提出相关评论,但仍有工作要做,我试图指出你正确的方向。

$("#leftmenu").on("click","a",function(e){
    // will prevent page load for now.
    e.preventDefault();
    //Instead will load the content into our div called container.
    $("#container").load($(this).attr('href'));

    if ($(this).parent().parent().attr('id')=='cul0')
    {
        $('#kwlogo').css('background-image' , 'url(/user/files/kathryn-wilson.jpg)');           
        $('#kwlogo').attr("href", "/category/miss-wilson/2.aspx")

    }
    else if ($(this).parent().parent().attr('id')=='cul2')
    {
        $('#kwlogo').css('background-image' , 'url(/user/files/logo_misswilson.jpg)');           
        $('#kwlogo').attr("href", "/category/miss-wilson/2.aspx")
    }
});

请参阅更新的小提琴here以了解所有更改。