通過使用onClick啓用css風格

我剛剛發現了jquery和css世界中可能發生的最奇怪的事情。通過使用onClick啓用css風格

我寫的代碼如下。

<img src="images/header_type1.png" 
    onclick="jQuery('.xe-clearfix').css('background-color','#fff'), 
       jQuery('.gnb>ul>li>a').css('color','#333'), 
       jQuery('.logo_text').css('color','#333')"> 
<img src="images/header_type2.png" 
    onclick="jQuery('.xe-clearfix').css('background-color','transparent'), 
       jQuery('.gnb>ul>li>a').css('color','#fff'), 
       jQuery('.logo_text').css('color','#fff'), 
       jQuery('.shrink .gnb>ul>li>a').css('color','#333'), 
       jQuery('.shrink .logo_text').css('color','#333')">

如果你只是可以去我的網站，點擊左側的齒輪按鈕，它會更容易解釋。

http://lifeto.cafe24.com/xe/page_cwmV35#

enter image description here

我開始解釋的問題是什麼之前，我想讓你明白，我的網頁上面爲「兩化」菜單：一個是停留在頁面的最頂端，以及當您向下滾動時出現的第二個。

現在，如您所見，如果您單擊第一張圖像，它會將背景顏色#fff設置爲主菜單欄。

如果你點擊第二張圖片，它會清除背景顏色#ffff，但它也會翻白菜單文本。

由於主菜單的文本顏色和第二個菜單的背景顏色都是白色，所以會創建第二個菜單（稱爲.shrink）不可見的情況。

正如你所看到的，我自己編寫了這些代碼，通過給.shrink .gnb> ul> li>顏色＃333（用於第二個菜單文本顏色）和.gnb> ul> li> a #fff（用於主菜單的文本顏色）

現在，問題是，即使我指定了所有在點擊左側面板上的圖像時需要更改的css類和屬性，

它只會改變那些「可見」元素的CSS屬性給你。

原諒我缺乏英語能力的，

我的意思是說，即使我設置.shrink .gnb> ul> li>一個是＃333當點擊了第二個圖像左側面板，

當元素在瀏覽器中不可見時，它不會更改。（直到你向下滾動到實際看到的div）

原來，如果它運行良好，主菜單文本顏色需要是白色和.shrink .gnb> ul> li> a的文本當點擊左側面板上的第二張圖像時，顏色應該是黑色，

但是瀏覽器似乎無法以某種方式一次全部更改。

即時通訊不知道你是否都能理解我現在正在經歷的事情，但如果你能幫助我在這裏，非常感謝。

謝謝。

來源

2015-11-19 Mark

你有沒有想過有不同的CSS樣式的，然後使用jQuery添加並刪除它們而不是設置很多單獨的屬性？ –

+1至Karl Gjertsen。只要建立一些課程，然後你可以在需要時切換它們，應該更容易 –

好吧，這聽起來像一個很好的選擇。但是我剛剛從學習jQuery獲得了很長的休息時間，你能提供一個小提琴還是somethinng？ – Mark

這是我完成它的方式。（使用類名和變量中的緩存jquery選擇器）：

var img1 = $('#imgOne'); 
var img2 = $('#imgTwo'); 
var xeClearfix = $('.xe-clearfix'); 
var navA = $('.gnb>li>a'); 
var logoText = $('.logo_text'); 
var merge1 = $.merge(xeClearfix, navA, logoText); 

img1.on('click', function(){ 
    merge1.removeClass('bgTrans textWhite').addClass('bgWhite textGrey'); 
}); 

img2.on('click', function(){ 
    merge1.removeClass('bgWhite textGrey').addClass('bgTrans textWhite'); 
});

原諒類名。它們不是最有語義的。

基本上就得到重用任何jQuery選擇更好緩存在一個變量（讓事情變得更快，你可以在無需更新所有的選擇，一旦改變變量。

我用jQuery的合併功能來添加這些（你可以創建一個選擇器數組並將其存儲在一個變量中，但不允許你將它們分開，而合併稍微更靈活）。

如果您將css規則更改爲類名只需點擊添加/刪除類名稱

不要使用oncli你的HTML中的ck事件（與邏輯分開的數據）。

你甚至可以在變量中設置類名，這將加快速度（並使事物更整潔，更易維護）。

還有其他的改進可以在這裏進行。

FIDDLE：http://jsfiddle.net/lharby/ccsLmxgb/

編輯。

您不同意任何HTML，所以我不得不作出這樣的了，但它確實表明了代碼的工作：

<img src="http://placehold.it/350x150" id="imgOne"> 
<img src="http://placehold.it/350x50" id="imgTwo"> 

    <div class="xe-clearfix">XE clearfix 

     <nav class="gnb"> 
      <li><a href="#">1</a></li> 
      <li><a href="#">2</a></li> 
      <li><a href="#">3</a></li> 
     </nav> 

    </div> 

    <div class="wrapper"> 
     <nav class="gnb"> 
      <li><a href="#">1</a></li> 
      <li><a href="#">2</a></li> 
      <li><a href="#">3</a></li> 
     </nav> 
    </div>

來源

2015-11-19 16:58:38 lharby

通過使用onClick啓用css風格

回答

相關問題