使用jQuery在click上应用不同的CSS类

时间:2012-02-07 19:13:09

标签: jquery css wordpress

我目前正在使用ThemeForest中的this template设置一个WordPress网站,这里是我目前正在处理live preview(现在应该正常工作 - 请如果它不起作用,请告诉我。

我配置了CSS,因此悬停时的左边框将是浅灰色。然后,当点击链接时,左边框将是我选择的蓝色。

如下图所示,我在导航中遇到的主要问题是CSS。投资组合链接(图片中的投资组合部分)仍然具有所选的类以及内部无序列表项。我希望它看起来像图片中的博客部分,其中博客链接不再应用所选的课程项目。

我问模板的创建者为什么会这样;他的回答是,下面需要另一个链接,其中包含title属性'allportfolio',所以它可以正常工作。我尝试将此属性添加到主要的Portfolio链接中,但随后完全关闭了该列表。

Portfolio Section - has two list items with CSS class selected applied and Blog Section - only one list item with CSS class selected applied

创建菜单后,浏览器会在HTML中按以下方式创建投资组合选择:

<ul class="main-menu" id="menu-main-menu">
    <li class="parent selected" id="menu-item-1172">
       <p><a href="http://localhost/portfolio/" style="color: rgb(57, 57, 57);">Portfolio</a></p>
    <div>
       <ul class="sub-menu">
           <li class="menu-item" id="menu-item-1158"><p><a data-filter="website-design" data-category="true" href="#">Website Design</a></p></li>
           <li class="menu-item" id="menu-item-1157"><p><a data-filter="print" data-category="true" href="#">Print</a></p></li>
           <li class="menu-item selected" id="menu-item-1156"><p><a data-filter="motion" data-category="true" href="#">Motion</a></p></li>
           <li class="menu-item" id="menu-item-1155"><p><a data-filter="identity" data-category="true" href="#">Identity</a></p></li>
           <li class="menu-item" id="menu-item-1167"><p><a data-filter="logos" data-category="true" href="#">Logos</a></p></li>
      </ul>
   </div>
   </li>

我尝试了类似于this answer的东西,但是没有用,因为它似乎没有在列表项中包含任何内容。下面的jQuery代码是我的尝试:

/*Portfolio links remove selected CSS setting*/
    $('ul#menu-main-menu ul.submenu li p a').click(
        function(){
            $('ul#menu-main-menu li').removeClass('parent selected');
            $(this).addClass('parent menu-item');
    });

我感到困惑,因为我无法弄清楚如何让HTML看起来如下(取出CSS类'选择'并添加CSS类'菜单项'):

<ul class="main-menu" id="menu-main-menu">
    <li class="parent menu-item" id="menu-item-1172">
       <p><a href="http://localhost/portfolio/" style="color: rgb(57, 57, 57);">Portfolio</a></p>
    <div>
       <ul class="sub-menu">
           <li class="menu-item" id="menu-item-1158"><p><a data-filter="website-design" data-category="true" href="#">Website Design</a></p></li>
           <li class="menu-item" id="menu-item-1157"><p><a data-filter="print" data-category="true" href="#">Print</a></p></li>
           <li class="menu-item selected" id="menu-item-1156"><p><a data-filter="motion" data-category="true" href="#">Motion</a></p></li>
           <li class="menu-item" id="menu-item-1155"><p><a data-filter="identity" data-category="true" href="#">Identity</a></p></li>
           <li class="menu-item" id="menu-item-1167"><p><a data-filter="logos" data-category="true" href="#">Logos</a></p></li>
      </ul>
   </div>
   </li>

更新:@limelights答案似乎有效,但我发现一些jQuery会影响网站上的链接悬停效果,并且不确定这是否是代码答案无效的原因在于WordPress模板的scripts.js文件

/* Links roll over effect */
    $('a').each(function(){
        if(!$(this).data('filter') && !$(this).parent().parent().parent().hasClass('pagination'))
            $(this).hoverFadeColor();
    })

此外,我非常接近我想要完成的任务,使用此代码最终保持内部链接打开:

/*Portfolio links remove selected CSS setting*/
    $('ul#menu-main-menu li div ul.sub-menu:first li.menu-item p a').click(
        function(){
            $('ul#menu-main-menu > li').removeClass('selected');
            $('ul#menu-main-menu > li').css({'color' : '#222'}).addClass('menu-item');
            $('ul#menu-main-menu li div:first').show();
        });

但是,它仍然在做什么(如下所示)是它仍然选择了像所选文本一样的文本。

selected text still applied to main menu list link, though the class was removed

非常感谢任何帮助!

4 个答案:

答案 0 :(得分:3)

这会给你预期的行为吗?

  $('a').each(function(e){
        if(!$(this).data('filter') && !$(this).parent().parent().parent().hasClass('pagination'))
        $(this).hoverFadeColor();
        e.preventDefault();
   })

添加e.preventDefault()可以解决问题。

更新12/10/2012:

尝试将点击功能更新为以下内容:

$('ul#menu-main-menu li div ul.sub-menu:first li.menu-item p a').on("click",function(){
    var linkClicked = $(this);
    $("#menu-main-menu li").each(function(){
        $(this).removeClass("selected").css({'color' : '#888'}).addClass('menu-item');
        $(this).first("div").show();
    });
    linkClicked.css({'color' : '#222'})
});

答案 1 :(得分:1)

如果我理解正确,这应该可以帮到你,如果你能够插入任何类型的脚本。 :)

$('ul#menu-main-menu li div ul.sub-menu li.menu-item p a').click(function(event){
    $('ul#menu-main-menu > li').removeClass('selected');
    alert($('ul#menu-main-menu > li').attr('class'));
    $('ul#menu-main-menu li').addClass('menu-item');
    alert($('ul#menu-main-menu > li').attr('class'));
    event.preventDefault();
});

我希望这就是你所追求的! :)

您可以在TInker.io

上试用here

我输入了两个警告,因此您可以看到该类实际被删除,然后添加了一个不同的类。你当然必须指定新类在css中的外观。

答案 2 :(得分:1)

我在你的CSS中做了一些小改动,并在你的html页面中添加了一些jquery函数,如下所示:

Css更改:

在custom.css中查找第67行,并按如下所示替换编码,

/*Turns link background white and removes border on the left at hover*/
.Light #menu ul.main-menu > li:hover > p > a {
   background:#FFF;
   border-left:6px solid #F0F0F0;
}

以上一个替换为

/*Turns link background white and removes border on the left at hover*/
.Light #menu ul.main-menu > li:hover > p > a {
   background:#FFF;
   /*border-left:6px solid #F0F0F0;*/
}

在主题页眉或页脚文件的某些位置添加Jquery函数,如下所示,

<script type="text/javascript">
$(document).ready(function() {
$("#menu-main-menu li:first").addClass("selected");
$("#menu-main-menu li p a").css("border-left","none");
$("#menu-main-menu li p a").hover(function(){$(this).css("border-left","6px solid #F0F0F0");});
$("#menu-main-menu li").click(function() {
  $(this).addClass("selected");
});
});
</script>

上述更改对我有用。要查看它的实际效果:http://jsbin.com/ehagal/1

我认为这可以帮助您解决问题。

答案 3 :(得分:0)

添加一些jQuery应该可以解决您的问题,如果您有一个我在实时预览中看到的副本而没有提及的自定义。

$("#menu-main-menu li").click(function(){ 
    $("#menu-main-menu li").removeClass("selected"); 
});