在手风琴画廊内加载正确的星期几

Question

我设计了一个显示不同图像的手风琴画廊 - 它遵循一周中的几天的结构

我想要实现的是，一旦用户加载页面，画廊就会加载正确的标签（星期几）。即今天是星期三 - 星期三标签将打开。目前，我确实只有从恰好是星期一的“li”加载第一个 img 的 javascript。我对 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>
                    Blank Blank 
                    Blank Blank 
                    Blank Blank 
                    Blank Blank 
                    Blank Blank 
                </li>
            </ul>
        </div>

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

<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

/* 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;
}

任何帮助将不胜感激！我对 JavaScript 太陌生了，我什至不知道从哪里开始

Answer 1

假设您的 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");
});

找到here获取星期几和here触发点击功能的解决方案和更多信息

Answer 2

你可以试试我刚刚添加的这一天只有你也可以通过写一个条件来做其他日子你也可以将p内容设置为display:none如果你不希望它在那里并且它仍然可以工作@ 987654321@p内容设置为display:noneFiddle

$(document).ready(function () {
    if ($('p:contains("Wednesday")')) {
        activeItem = $(".wed");
        $(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 date = new Date();
var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var weekday = weekdays[date.getDay()];
$('p').text(weekday);

#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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p></p>
<div class="contentDiv">
    <ul id="DOTD">
        <li>
            <img src="http://placekitten.com/300/301">
        </li>
        <li>
            <img src="http://placekitten.com/300/302">
        </li>
        <li class="wed">
            <img src="http://placekitten.com/300/303">
        </li>
        <li>
            <img src="http://placekitten.com/300/304">
        </li>
        <li>
            <img src="images/1NewBC/DOTD/Friday.gif">
        </li>
        <li>
            <img src="http://placekitten.com/300/306">
        </li>
        <li>Blank Blank Blank Blank Blank Blank Blank Blank Blank Blank</li>
    </ul>
</div>