今天 - 优文库

当它改变UL背景我有一个简单的课程表，我想请一天列是不同的，如果它是一周的那一天。今天

E.G.如果是周三，那么周三列不同

我一直在玩弄但无济于事，并通过论坛搜索。我已经到了这一点。

我愿意接受任何新的方法。谢谢。

脚本

<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script> 
<script> 
$('.fc-today').prevAll('ul').css('backgroundColor','yellow'); 
$('.fc-today').parent().prevAll().find('ul').css('backgroundColor','yellow'); 
</script>

HTML

<div class="calendar-daycontent fc-mon"> 
    <ul> 
    <a href="###"> 
     <li class="class-time"> 
      11.00 - 12.00 
     </li> 
     <li class="class-header"> 
      Class 
     </li> 
     <li class="class-inst"> 
      Instructor 
     </li> 
     </a> 
    </ul> 
</div> 

<div class="calendar-daycontent fc-tue"> 
    <ul> 
    <a href="###"> 
     <li class="class-time"> 
      11.00 - 12.00 
     </li> 
     <li class="class-header"> 
      Class 
     </li> 
     <li class="class-inst"> 
      Instructor 
     </li> 
     </a> 
    </ul> 
</div> 

<div class="calendar-daycontent fc-wed"> 
    <ul> 
    <a href="###"> 
     <li class="class-time"> 
      11.00 - 12.00 
     </li> 
     <li class="class-header"> 
      Class 
     </li> 
     <li class="class-inst"> 
      Instructor 
     </li> 
     </a> 
    </ul> 
</div> 

<div class="calendar-daycontent fc-thu"> 
    <ul> 
    <a href="###"> 
     <li class="class-time"> 
      11.00 - 12.00 
     </li> 
     <li class="class-header"> 
      Class 
     </li> 
     <li class="class-inst"> 
      Instructor 
     </li> 
     </a> 
    </ul> 
</div> 

<div class="calendar-daycontent fc-fri"> 
    <ul> 
    <a href="###"> 
     <li class="class-time"> 
      11.00 - 12.00 
     </li> 
     <li class="class-header"> 
      Class 
     </li> 
     <li class="class-inst"> 
      Instructor 
     </li> 
     </a> 
    </ul> 
</div> 

<div class="calendar-daycontent fc-sat"> 
    <ul> 
    <a href="###"> 
     <li class="class-time"> 
      11.00 - 12.00 
     </li> 
     <li class="class-header"> 
      Class 
     </li> 
     <li class="class-inst"> 
      Instructor 
     </li> 
     </a> 
    </ul> 
</div> 

<div class="calendar-daycontent fc-sun"> 
    <ul> 
    <a href="###"> 
     <li class="class-time"> 
      11.00 - 12.00 
     </li> 
     <li class="class-header"> 
      Class 
     </li> 
     <li class="class-inst"> 
      Instructor 
     </li> 
     </a> 
    </ul> 
</div>

CSS

div.calendar-daycontent { 
float : left ; 
width : 138px ; 
margin : 1px ; 
display : block ; 
} 

    div.calendar-daycontent ul { 
    float : left ; 
    width : 100% ; 
    display : block ; 
    margin-bottom : 2px ; 
    } 

    .fc-mon ul {background-color:Red;} 
    .fc-tue ul {background-color:green;} 
    .fc-wed ul {background-color:blue;} 
    .fc-thu ul {background-color:Red;} 
    .fc-fri ul {background-color:Red;} 
    .fc-sat ul {background-color:green;} 
    .fc-sun ul {background-color:blue;} 

    .fc-today ul {} 

    div.calendar-daycontent ul a:link, div.calendar-daycontent ul a:visited { 
    float : left ; 
    width : 122px ; 
    display : block ; 
    padding : 12px 8px ; 
    text-decoration : none ; 
    } 

    div.calendar-daycontent ul a:hover { 
    float : left ; 
    width : 122px ; 
    display : block ; 
    padding : 12px 8px ; 
    text-decoration : none ; 
    background-color : #6bb925 ; 
    -o-transition : .3s ; 
    -ms-transition : .3s ; 
    -moz-transition : .3s ; 
    -webkit-transition : .3s; 
    transition : .3s ; 
    } 

     div.calendar-daycontent ul li { 
     float : left ; 
     width : 100% ; 
     display : block ; 
     padding : 2px 0px ; 
     color : #151515 ; 
     text-align : center ; 
     } 

     div.calendar-daycontent ul li.class-header { 
     font-size : 15px ; 
     font-weight : 800 ; 
     text-transform : uppercase ; 
     font-style : italic; 
     color : #6bb925 ; 
     margin-top : 2px ; 
     margin-bottom : 1px ; 
     } 

      div.calendar-daycontent ul:hover li.class-header { 
      color : #fff ; 
      } 

     div.calendar-daycontent ul li.class-inst { 
     font-size : 12px ; 
     font-weight : 800 ; 
     } 

     div.calendar-daycontent ul li.class-time { 
     font-size : 11px ; 
     font-weight : 800 ; 
     } 

     div.calendar-daycontent ul li.class-room { 
     font-size : 11px ; 
     }

来源

2015-09-09 Lozano

锚不能是无序列表的一个子元素，你应该向外移动的它 – Pete

事情是这样的：fiddle

$(function() { 
    var dayOfWeek = (new Date).getDay(); 
    var dayClasses = ['fc-sun', 'fc-mon', 'fc-tue', 'fc-wed', 'fc-thu', 'fc-fri', 'fc-sat']; 
    $('.' + dayClasses[dayOfWeek] + ' ul').css('backgroundColor', 'yellow'); 
});

来源

2015-09-09 08:56:31

感谢这..我可以看到它的小提琴的作品，但是当我把它放进我的编辑器并测试它时，它不会。这是我的部分，是不是？ – Lozano

此行'

尝试使用Date获取一周中的当前天：

$(function(){ 
    var day = new Date().getDay(); 
    day = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"][day]; 
    $('div.calendar-daycontent.fc-' + day + ' ul').css({'background':'yellow'}); 
});

来源

2015-09-09 09:15:05 Arvind

谢谢你。我可以看到它在小提琴中奏效，但是当我将它移动到我的文件时，它不起作用。你有什么建议吗？谢谢 – Lozano

@Lozano，请检查jQuery导入 – Arvind

今天

回答

相关问题