在手风琴廊内加载一周的正确日期 [英] load correct day of the week inside accordion gallery

问题描述

我试图实现的目的是让用户在加载页面时立即加载正确的选项卡（星期几）。即今天是星期三 - 星期三标签将被打开。目前JavaScript的确只加载了'李'的第一个img，恰好是星期一。我对JavaScript非常陌生 - 我的技能对JS非常有限。

这是我的HTML

 < div class =contentDiv> 
< ul id =DOTD> 
< li> 
< img src =images / 1NewBC / DOTD / Monday.gif> 
< / li> 
< li> 
< img src =images / 1NewBC / DOTD / Tuesday.gif> 
< / li> 
< li> 
< img src =images / 1NewBC / DOTD / Wednesday.gif> 
< / li> 
< li> 
< img src =images / 1NewBC / DOTD / Thursday.gif> 
< / li> 
< li> 
< img src =images / 1NewBC / DOTD / Friday.gif> 
< / li> 
< li> 
< img src =images / 1NewBC / DOTD / DOTW.gif> 
< / li> 
< li> 
空白空白
空白空白
空白空白
空白空白
空白空白
< / li> 
< / ul> 
< / div> 
  

这是我的JavaScript - 真的很基本 - 它所做的就是首先加载列表并创建一个点击事件，以便用户可以手动点击标签

 < script> 
 $（document）.ready（function（）{
 activeItem = $（＃DOTD li：first）; 
 $（activeItem）.addClass（'active'）; 
 
 $（＃DOTD li）。click（function（）{
 $（activeItem）.animate（{width：28px}，{duration：300，queue：false}） ; 
 $（this）.animate（{width：741px}，{duration：300，queue：false}）; 
 activeItem = this; 
}）; 
 }）; 
< / script> 
  

这是我的css for accordion gallery

  / *每日交易编码* / 
 / * DoTD背景* / 
 #content .contentDiv #DOTD {
 list-style：none ; 
 overflow：hidden; 
背景：rgb（36,73,148）; 
 display：inline-block; 
 margin-left：0px; 
 margin-bottom：-10px; 
} 
 
 / * DotD列表和文本颜色* / 
 #DOTD li {
 float：left; 
 border：4px solid rgb（255,255,255）; 
 display：block; 
 height：120px; 
 width：28px; 
 overflow：hidden; 
颜色：白色; 
 font-size：16px; 
 line-height：1.5em; 
} 
 
 #DOTD li img {
 border：none; 
 float：left; 
} 
 #DOTD li：hover {
 border：4px ridge black; 
} 
 
 #DOTD li.active {
 width：741px; 
} 
  

任何帮助都会令人满意！我对JavaScript很陌生，甚至不知道从哪里开始

解决方案

假设你的JavaScript看起来像，你正在使用jQuery ，这里是一个基于你的实际javascript代码的示例代码。

  $（document）.ready（function（）{
 
 activeItem = $（#DOTD li：first）; 
 $（activeItem）.addClass（'active'）; 
 
 
 
 $（#DOTD li）。click（function（）{
 $（activeItem）.animate（{width：28px}，{duration：300，queue：false}）; 
 $ （this）.animate（{width：741px}，{duration：300，queue：false}）; 
 activeItem = this; 
}）; 
 
 var d = new Date（）; 
 var n = d.getDay（）; 
 $（li）。eq（n-1）.trigger（click）; 
}） ; 
  

解决方案和更多信息此处获取星期几，此处来触发点击功能

i've designed an accordion gallery displaying different images - and it follows the structure of days of the week

What i am trying to achieve is for gallery to load the correct tab (day of the week) as soon as the user loads page. i.e today is wednesday - wednesday tab will be opened. At the moment the javascript i do have only loads the first img from the 'li' which happens to be Monday. I am very new to javascript - my skills are very limited with JS.

This is my HTML

 <div class="contentDiv">
            <ul id="DOTD">
                <li>
                    <img src="images/1NewBC/DOTD/Monday.gif">
                </li>
                <li>
                    <img src="images/1NewBC/DOTD/Tuesday.gif">                      
                </li>
                <li>
                    <img src="images/1NewBC/DOTD/Wednesday.gif">                        
                </li>
                <li>
                    <img src="images/1NewBC/DOTD/Thursday.gif">                     
                </li>
                <li>
                    <img src="images/1NewBC/DOTD/Friday.gif">                       
                </li>
                <li>
                    <img src="images/1NewBC/DOTD/DOTW.gif">
                </li>
                <li>
                    Blank Blank 
                    Blank Blank 
                    Blank Blank 
                    Blank Blank 
                    Blank Blank 
                </li>
            </ul>
        </div>

Here is my JavaScript - really basic - all it does is loads first img fromt the list and created a click event so user can manualy click through the tabs

<script>
    $(document).ready(function(){      
        activeItem = $("#DOTD li:first");     
        $(activeItem).addClass('active');       

        $("#DOTD li").click(function(){         
            $(activeItem).animate({width: "28px"}, {duration:300, queue:false});         
            $(this).animate({width: "741px"}, {duration:300, queue:false});         
            activeItem = this;     
        });
    });
    </script>

and this is my css for accordion gallery

/* Deal of the Day Coding */
/* DoTD Background */
#content .contentDiv #DOTD{
list-style: none;
overflow: hidden;
background: rgb(36,73,148);
display: inline-block;
margin-left: 0px;
margin-bottom: -10px;
}

/* DotD list and text color */  
#DOTD li{
float: left;
border: 4px solid rgb(255,255,255);
display: block;
height: 120px;
width: 28px;
overflow: hidden;
color: white;
font-size: 16px;
line-height: 1.5em;
}

#DOTD li img{
border: none;
float: left;
}
#DOTD li:hover{
border: 4px ridge black;
}

#DOTD li.active{
width: 741px;
}

Any help would be much apreccieated!! I am so new to JavaScript that i dont even know where to start

解决方案

Assuming what your Javascript look like, you are using jQuery, here's a sample code based on of your actual javascript code

$(document).ready(function(){

activeItem = $("#DOTD li:first");     
$(activeItem).addClass('active');  



    $("#DOTD li").click(function(){         
        $(activeItem).animate({width: "28px"}, {duration:300, queue:false});         
        $(this).animate({width: "741px"}, {duration:300, queue:false});         
        activeItem = this;     
    });

    var d = new Date();
    var n = d.getDay();
    $("li").eq(n-1).trigger("click");
});

Solution and more informations found here for getting the day of week, and here to trigger the click function

这篇关于在手风琴廊内加载一周的正确日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！