如何在HTML-CSS中切換圖像？

-3

我想切換圖像，我搜索了網絡，但無法找到適合我的場景的解決方案。右側的標籤菜單上有三個按鈕。默認情況下，它加載第一個DIV，然後當我點擊第二個按鈕時，它加載第二個類似的第二個div。現在，我的按鈕在背景中有一個圖像。我想顯示其格是活動通過切換圖像如何在HTML-CSS中切換圖像？

現在看到這個圖片，這是我的菜單中的第一個是活動的，這是一個L1標籤，我已經將背景設置爲李現在時我點擊第二個選項卡上我想改變在三個選項卡的圖像：第一個將與線和一個活動沒有行..

也許它太混亂:(

這裏的代碼::

<!DOCTYPE html> 
<html> 

<head> 
    <title></title> 
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 
</head> 

<body> 
    <div id="tabs"> 
     <ul style="float:right"> 
      <li> 
       <a href="#a" class="clickable"></a> 
      </li> 
      <li> 
       <a href="#b" class="bizrtc"></a> 
      </li> 
      <li> 
       <a href="#c" class="lab"></a> 
      </li> 
     </ul> 
     <div id="a"> 
      <object type="text/html" data="home.html" width="1280px" height="720px" style="overflow:auto;"> </object> 
     </div> 
     <div id="b"> 
      <object type="text/html" data="contact.html" width="1280px" height="720px" style="overflow:auto;"></object> 
     </div> 
     <div id="c"> 
      <object type="text/html" data="blog.html" width="1280px" height="720px" style="overflow:auto;"></object> 
     </div> 
    </div> 
    <script> 
     $("#siteloader").html('<object data="home.html">'); 
    </script> 
    <style type="text/css"> 
    .ui-tabs.ui-tabs-vertical { 
      padding: 0; 
      width: 104%; 
     } 

     .ui-tabs.ui-tabs-vertical .ui-widget-header { 
      border: none; 
     } 

     .ui-tabs.ui-tabs-vertical .ui-tabs-nav { 
      float: left; 
      width: 4em; 
      border-radius: 4px 0 0 4px; 
     } 

     .ui-tabs.ui-tabs-vertical .ui-tabs-nav li { 
      clear: left; 
      width: 100%; 
      margin: -52px 0px; 
      height: 230px; 
      border-width: 1px 0 1px 1px; 
      border-radius: 4px 0 0 4px; 
      overflow: hidden; 
      position: relative; 
      right: 38px; 
      z-index: 2; 
     } 

     .ui-tabs.ui-tabs-vertical .ui-tabs-nav li a { 
      display: block; 
      width: 100%; 
      padding: 0.6em 1em; 
      height: inherit; 
     } 

     .ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover { 
      cursor: pointer; 
     } 

     .ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { 
      margin-bottom: -52px; 
      padding-bottom: 0; 
      border-right: 1px solid white; 
      height: 230px; 
     } 

     .ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child { 
      margin-top: -52px; 
     } 

     .ui-tabs.ui-tabs-vertical .ui-tabs-panel { 
      float: left; 
      width: 28em; 
      border-left: 1px solid gray; 
      border-radius: 0; 
      position: relative; 
      left: -1px; 
     } 

     .clickable { 
      background: url(buttons/umobility_button_active.png) no-repeat 6px center; 
     } 

     .bizrtc { 
      background: url(buttons/labs_button.png) no-repeat 6px center; 
     } 

     .lab { 
      background: url(buttons/rtcbiz_button.png) no-repeat 6px center; 
     } 
    } 
    </style> 
</body> 
<script type="text/javascript"> 
    $('#tabs').tabs().addClass('ui-tabs-vertical ui-helper-clearfix'); 
</script> 

</html>

來源

2015-10-13 Rajan

您可以在單擊時添加名爲「active」的類，然後在包含活動類時創建具有不同背景圖像的新CSS規則 – Lee

但我已將它們設置爲背景我可以更改它們> – Rajan

...是的。您只需創建一個包含活動類的新CSS規則，並使用其他圖像。 – Lee

你的CSS規則，包括另一種狀態是這樣的：

.clickable.active { 
    background: url(buttons/umobility_button_active.png) no-repeat 6px center; 
} 

.bizrtc.active { 
    background: url(buttons/labs_button_active.png) no-repeat 6px center; 
} 

.lab.active { 
    background: url(buttons/rtcbiz_button_active.png) no-repeat 6px center; 
}

你將需要使用jquery onClick調用該選項卡不過。

$("#tabs li a").click(function() { 
    $(this).addClass('active'); 
});

來源

2015-10-13 08:20:49 Lee

讓我試試這個:) – Rajan

這個工程，但我想只顯示一個爲活動。所以現在會發生什麼只是首先是活動然後當我點擊第一和第二成爲活躍，當我點擊第三所有THOT成爲活躍，所以在一次只有一個應該是活躍 – Rajan

試試這個 $（「＃tabs li a 「）.click（function（）{（」＃tabs li a「）。removeClass（'active'）; $（this）.addClass（'active'）; }）; –

-3

您可以使用：background-image src ..然後當懸停觸發時，您可以更改src。

$('#your-id').on('click', function(e) { 
$(this).css('background-color', 'blue'); 
});

或使用：

$(this).toggleClass('active');

，並具有CSS：

#my-image.active { 
your different background css 
}

來源

2015-10-13 08:16:40 belthazorNv

我想改變點擊！以及如何做到這一點應該是我的CSS規則？ – Rajan

你必須這樣做： '$（'＃your-id'）。on（'click'，function（e）{ $（this）。css（'background-color'，'blue'）; }）;' – belthazorNv

更新爲你 – belthazorNv

請仔細閱讀CSS代碼。只需添加到您現有的塊

.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { 
    margin-bottom: -52px; 
    padding-bottom: 0; 
    border-right: 1px solid white; 
    height: 230px; 
}

另一個規則像

background-image:url(path-to-file);

在塊像

li.ui-tabs-active.a { new rule for class a } 
li.ui-tabs-active.b { new rule for class b } 
li.ui-tabs-active.c { new rule for class c }

的切換功能來自jQuery UI的所以有沒有別的事可做。

來源

2015-10-13 08:26:13

如何在HTML-CSS中切換圖像？

回答

相關問題