製作文本加粗根據

一週

我已經在我的網站開放的景點次的一天，我想它使文本加粗取決於它是一天。所以，如果是星期二，'星期二上午10點 - 下午4點'將以粗體顯示。我設法得到這個工作的一個吸引力的div，但它不適用於任何其他景點divs，我不知道爲什麼。製作文本加粗根據

網站：explorecanterbury.co.uk（查看div的搜索或點擊坎特伯雷大教堂和梅龍鎮，你可以看到坎特伯雷大教堂的作品，但梅龍鎮沒有）。

HTML

<div class="info-div col-md-5 col-xs-6" id="CDiv" style="background-color:orange;"> 
    <div class="close" onclick="hide('CDiv')"><span class="close-btn"></spam></div> 
     <div class="content col-md-10"> 
      <h2 class="subtitle">Canterbury Cathedral</h1> 
      <img src="images/test.jpg" class="img-responsive"> 
      <p>St Augustine, the first Archbishop of Canterbury, arrived on the coast of Kent as a missionary to England in 597 AD. He came from Rome, sent by Pope Gregory the Great.</p> 
      <h2 class="subtitle">Find out more...</h1> 
      <ul id="shareMenu"> 
       <li class="shareLi"><span class="webIcon"></span></li> 
       <li class="shareLi"><span class="fbIcon"></span></li> 
       <li class="shareLi"><span class="twitterIcon"></span></li> 
       <li class="shareLi"><span class="instaIcon"></span></li> 
      </ul> 
      <h2 class="subtitle">Opening Times</h2> 
      <ul style="list-style: none; padding: 0px;"> 
       <li><span class="weekday" id="1">Monday: 9am - 5.30pm</span></li> 
       <li><span class="weekday" id="2">Tuesday: 9am - 5.30pm</span></li> 
       <li><span class="weekday" id="3">Wednesday: 9am - 5.30pm</span></li> 
       <li><span class="weekday" id="4">Thursday: 9am - 5.30pm</span></li> 
       <li><span class="weekday" id="5">Friday: 9am - 5.30pm</span></li> 
       <li><span class="weekday" id="6">Saturday: 9am - 5.30pm</span></li> 
       <li><span class="weekday" id="0">Sunday: 12.30pm - 2.30pm</span></li>  
      </ul> 
      <h2 class="subtitle">Related Attractions</h1> 
       <div class="col-sm-6 col-md-12"> 
        <div class="clearfix"> 
         <div id="thumbcarousel" class="carousel slide" data-interval="false"> 
          <div class="carousel-inner"> 
           <div class="item active"> 
            <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://placehold.it/100/e8117f/fff&amp;text=Product+Main"></div> 
            <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://placehold.it/100/00ffff/000&amp;text=Product+Image+2"></div> 
           </div><!-- /item --> 
           <div class="item"> 
            <div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://placehold.it/100/612b65/fff&amp;text=Product+Image+5"></div> 
            <div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://placehold.it/100/00ffcc/000&amp;text=Product+Image+6"></div> 
           </div> 
           <a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev"> 
           <span class="glyphicon glyphicon-chevron-left"></span> 
           </a> 
           <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next"> 
           <i class="glyphicon glyphicon-chevron-right"></i> 
           </a> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<div class="info-div col-md-5 col-xs-6" id="WDiv" style="background-color:orange;"> 
    <div class="close" onclick="hide('WDiv')"><span class="close-btn"></spam></div> 
     <div class="content col-md-10"> 
      <h2 class="subtitle">Westgate Towers</h1> 
      <img src="images/test.jpg" class="img-responsive"> 
      <p>The Westgateis a medieval gatehouse in Canterbury,Kent, England. This 60-foot high western gate of the city wall is the largest surviving city gate in England. Built of Kentish ragstone around 1379, it is the last survivor of Canterbury's seven medieval gates, still well-preserved and one of the city's most distinctive landmarks. The Tower is a scheduled ancient monument and Grade I listed. Visitors can explore its rich history and take in the spectacular views of the city from the battlements viewpoint.</p> 
      <h2 class="subtitle">Find out more...</h1> 
      <ul id="shareMenu"> 
       <li class="shareLi"><span class="webIcon"></span></li> 
       <li class="shareLi"><span class="fbIcon"></span></li> 
       <li class="shareLi"><span class="twitterIcon"></span></li> 
       <li class="shareLi"><span class="instaIcon"></span></li> 
      </ul> 
      <h2 class="subtitle">Opening Times</h2> 
      <ul style="list-style: none; padding: 0px;"> 
       <li><span class="weekday" id="1">Monday: 11am - 4pm</span></li> 
       <li><span class="weekday" id="2">Tuesday: 11am - 4pm</span></li> 
       <li><span class="weekday" id="3">Wednesday: 11am - 4pm</span></li> 
       <li><span class="weekday" id="4">Thursday: 11am - 4pm</span></li> 
       <li><span class="weekday" id="5">Friday: 11am - 4pm</span></li> 
       <li><span class="weekday" id="6">Saturday: 11am - 4pm</span></li> 
       <li><span class="weekday" id="0">Sunday: 11am - 4pm</span></li>  
      </ul> 
      <h2 class="subtitle">Related Attractions</h1> 
       <div class="col-sm-6 col-md-12"> 
        <div class="clearfix"> 
         <div id="thumbcarousel" class="carousel slide" data-interval="false"> 
          <div class="carousel-inner"> 
           <div class="item active"> 
            <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://placehold.it/100/e8117f/fff&amp;text=Product+Main"></div> 
            <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://placehold.it/100/00ffff/000&amp;text=Product+Image+2"></div> 
           </div><!-- /item --> 
           <div class="item"> 
            <div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://placehold.it/100/612b65/fff&amp;text=Product+Image+5"></div> 
            <div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://placehold.it/100/00ffcc/000&amp;text=Product+Image+6"></div> 
           </div> 
           <a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev"> 
           <span class="glyphicon glyphicon-chevron-left"></span> 
           </a> 
           <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next"> 
           <i class="glyphicon glyphicon-chevron-right"></i> 
           </a> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

CSS

.highlight { 
font-weight:bold; 
}

var today = new Date().getDay(); 

$("#" + today).addClass("highlight");

來源

2016-03-09 user3005003

簡單... ID的不能在一個頁面重複。它們的定義是獨一無二的 – charlietfl

嘗試設置類，而不是ID。

<span class="weekday d1"> 
<span class="weekday d2"> 
<span class="weekday d3">

等

var today = new Date().getDay(); 

$(".d" + today).addClass("highlight");

ID = 1在你的HTML被複制，這可能會導致麻煩

來源

2016-03-09 15:40:19

可以完全消除id標籤，並突出使用:nth-of-type
該方法突出了正確的路線兩組列表的正確日期。

HTML

<li><span class="weekday"></span></li> 
<li><span class="weekday"></span></li> 
<li><span class="weekday"></span></li>

var date = new Date(); 
var dayOfWeek = date.getDay(); 

$('li:nth-of-type(' + dayOfWeek + ')').find('.weekday').addClass('highlight');

來源

2016-03-09 16:18:21

製作文本加粗根據

回答

相關問題