如果選擇另一個li，則設置字體重量

另一個問題是，如果選擇該文本，是否可以將字體粗體設置爲文本元素的粗體。這已經完成了很多@Eric！但目前，當你點擊一個文本時，你可以愉快地點擊另一個文本，並且這兩個文本都將變爲粗體。如果選擇另一個li，則設置字體重量

如何防止多個文本元素變爲粗體？

這是我上的jsfiddle代碼：http://jsfiddle.net/6XMzf/以下：

CSS：

html,body { 
    margin: 0; 
    padding: 0 
} 
#background { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0; 
    color: white; 
} 

.stretch { 
    width:100%; 
    height:100%; 
} 
.navigationPlaceholder { 
    width:100px; 
    height: 400px; 
    left: 100px; 
    top: 100px; 
    position: absolute; 
} 
#navigation { 
    background-color: #000000; 
} 
#navigationText ul { 
    font-family: "Yanone Kaffeesatz"; 
    font-weight: 100; 
    text-align: left; 
    font-size: 25px; 
    color: #b2b2b2; 
    left: 25px; 
    top: 50px; 
    position: absolute; 
    line-height: 40px; 
    list-style-type: none; 
} 
.noSelect { 
    -moz-user-select: none; /* mozilla browsers */ 
    -khtml-user-select: none; /* webkit browsers */ 
}

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <title>Max Kramer | iOS Developer</title> 
     <link rel="stylesheet" type="text/css" href="css/style.css" /> 
     <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" /> 
    </head> 
    <body> 
     <div id="background" /> 
     <div id="navigation" class="navigationPlaceholder"> 
      <div id="navigationText"> 
       <ul> 
        <li>iOS</li> 
        <li>Blog</li> 
        <li>About</li> 
        <li>Contact</li> 
       </ul> 
      </div> 
     </div> 
     </div> 
     <script type="text/javascript"> 
      var nav = document.getElementById('navigationText'); 

      var navItems = nav.getElementsByTagName('li'); 

      for (var i = 0; i < navItems.length; i++) { 
       navItems[i].addEventListener('click', function() { 
        this.style.fontWeight = '400'; 
       }, false); 
      } 

     </script> 
    </body> 
</html>

來源

2011-08-30 max_

你能http://jsfiddle.net呢？ –

http://jsfiddle.net/6XMzf/ –

至少在FF 6中，當我點擊元素時沒有任何事情發生。請注意，將元素HTML文檔放在jsfiddle中的框架中是不正確的。 –

如果你沒有選擇器引擎方便像jQuery和真的要做到這一點在普通的JavaScript，我會做這樣的：

function addClass(elem, className) { 
    if (elem.className.indexOf(className) == -1) { 
     elem.className += " " + className; 
    } 
} 

function removeClass(elem, className) { 
    elem.className = elem.className.replace(new RegExp("\\s*" + className), ""); 
} 

var lastSelected = null; 

function initNavClickHandler() { 
    var nav = document.getElementById('navigationText'); 
    var navItems = nav.getElementsByTagName('li'); 

    for (var i = 0; i < navItems.length; i++) { 
     navItems[i].addEventListener('click', function() { 
      addClass(this, "selected"); 
      if (lastSelected) { 
       removeClass(lastSelected, "selected"); 
      } 
      lastSelected = this; 
     }, false); 
    } 
} 

initNavClickHandler();

然後，添加一個CSS規則控制選定的外觀：

.selected {font-weight: 800;}

這是造型很多更靈活，因爲只要你想的.selected類改變/修改而沒有觸及你的代碼，你可以添加任意多的CSS規則。

你可以看到它在這裏工作：http://jsfiddle.net/jfriend00/rrxaQ/

來源

2011-08-30 03:12:58 jfriend00

謝謝，在我接受這個之前，你能告訴我如果我選擇的文本是「博客」，我該如何解決？ –

檢測博客LI的最好方法是在該LI標籤上放置'class =「blog」'。您也可以使用基於該類的不同CSS。有關HTML/CSS/JS的示例，請參閱http://jsfiddle.net/jfriend00/w4Udw/。您可以使用代碼來測試標記的文本，但這不像使用類那麼理想。 – jfriend00

它爲我拾取每個li標籤，並在所有這些標籤上運行if語句，http://maxk.me/test/ –

如果你可以使用的東西像jQuery那麼這是一個更簡單的問題。讓我向您展示用於突出顯示和不突出顯示的jQuery解決方案。

$("#navigationText li").click(function() { 
    $("#navigationText li").css("fontWeight", "100"); 
    $(this).css("fontWeight", "400"); 
});

現在你可以在沒有jQuery的情況下自己實現同樣的事情。你或者需要創建一個全局的持有當前加粗的項目，並刪除fontWeight或從所有項目中刪除fontWeight（蠻力）。

 //untested with global to store currently selected 
     var nav = document.getElementById('navigationText'); 
     var activeItem = null; 

     var navItems = nav.getElementsByTagName('li'); 

     for (var i = 0; i < navItems.length; i++) { 
      navItems[i].addEventListener('click', function() { 
       if (activeItem) {activeItem.style.fontWeight = '100'; } 
       this.style.fontWeight = '400'; 
       activeItem = this; 
      }, false); 
     } 

     //sorry I don't feel like writing a brute force one for you!

來源

2011-08-30 03:06:22 mrtsherman

好吧，我很新的HTML + CSS，我從來沒有使用jQuery，我會在哪裏把jQuery代碼？ –

如果選擇另一個li，則設置字體重量

回答

相關問題