在DIV上更改背景顏色 - 用選項卡交換顏色

我試圖在點擊它們時更改三個div的背景顏色。當單擊它時，我已設法更改div的背景顏色和內容，但無法確定如何將div恢復到原始狀態？在DIV上更改背景顏色 - 用選項卡交換顏色

應該與一個沿頂三個選項卡（一，二，三），在默認情況下的綠色，當其他任何人都點擊了defaut變化和被點擊變更中的一個功能。 http://jsfiddle.net/0es6neph/

選項卡每個人都應該被默認選擇。

我要對這個正確的方式或者是一個混亂的解決方案，以一個簡單的問題嗎？

<script type="text/javascript"> 
var currentDiv = null; 

function swapin(divName){ 
if(currentDiv != null){ 
document.getElementById(currentDiv).style.display = "none"; 

} 
if(document.getElementById != 'contain'){ 
document.getElementById('1').style.display = "none"; 
} 
currentDiv = divName; 
document.getElementById(currentDiv).style.display = "block"; 
} 
window.onload = function(){ 
document.getElementById('1').style.display = "block"; 
} 

</script> 

<style> 
.tabs { 
    background-color:#7D135A; 
    border-radius: 2px 2px 0 0; 
    height: 50px; 
    width: 90px; 
    padding-left:10px; 
    padding-right:10px; 
    padding-top:5px; 
    padding-bottom:0px; 
    color:#FFFFFF; 
    } 

.contain { 
    width:500px; 
    height:200px; 
    border:2px; 
    border-style: solid; 
    border-color: #7D135A; 
    } 



</style> 

<a href="javascript: swapin('1');" class="tabs">One</a>&nbsp; 
<a href="javascript: swapin('2');" class="tabs" >Two</a>&nbsp; 
<a href="javascript: swapin('3');" class="tabs">Three</a>&nbsp; 

<div id="contain" class="contain"> 
<div id="1" style="display: none;"> 
One Content 
</div> 
<div id="2" style="display: none;"> 
Two Content 
</div> 
<div id="3" style="display: none;"> 
Three Content 
</div> 
</div> 

<script> 
$(function() { 
$(".tabs").click(function() { 
    $(this).css('background-color', '#008000'); 
}); 
}); 
</script>

來源

2014-09-21 Rick Evans

你應該將所有剩餘的香草jQuery的可讀性原因開始。 – 2014-09-21 17:43:09

這是真的很亂......我發現了一些不必要的航線代碼：

1）使用開始喜歡＃TAB1和單獨從未號的信標識。 2）不需要在一個函數中封裝這個過程。這是一個簡單的過程，不需要像重複模式那樣解決。 3）不要在href屬性中調用函數。使用onclick來運行JS點擊指令。

使用這種方法代替：JSFIDDLE

$(function() { 
    $(".tab").click(function() { 
     var tab = $(this), 
      dataTab = tab.attr('data-tab'); 
     tab.addClass('active').siblings('.tab').removeClass('active'); 
     $('#'+dataTab).show().siblings().hide(); 
    }); 
});

來源

2014-09-21 17:42:58 henser

編輯小提琴......我相信它現在按預期工作......檢查它！ – henser 2014-09-21 17:48:51

這就是它應該如何工作，除了選項卡'一個'是默認選擇（綠色）。這比我做這件事簡單得多。我可以問，所以我理解它，第一個和第二個版本有什麼區別？第一個似乎也工作得很好，而且更短？謝謝！ – 2014-09-21 17:52:31

第一個和第二個版本是什麼意思？ – henser 2014-09-21 17:56:21

我覺得你應該給那些div的一類如：.bg然後你應該在jQuery的改變背景顏色一樣here。

來源

2014-09-21 17:37:33

我會建議使用一類用於更改鏈接的狀態。

在CSS

.active{ 
    background-color: #008800; 
}

添加這個

您點擊功能更改爲這個

$(".tabs").click(function() { 
     $(".active").removeClass("active"); 
     $(this).addClass('active'); 
    });

看看這裏的JSFiddle

來源

2014-09-21 17:43:29

使用jQuery因爲你已經加載它。並嘗試不要將您的代碼網格化。

var openTab = null; 
 

 
function swapin(newTab){ 
 
    if(openTab != null){ 
 
     openTab.css('background-color','#7D135A'); 
 
     $(openTab.data('tab-element')).css('display',"none"); 
 
    } 
 
\t 
 
\t newTab.css('background-color','#008000'); 
 
    $(newTab.data('tab-element')).css('display',"block"); 
 
\t 
 
\t openTab = newTab; 
 
} 
 

 
$(function() { 
 
    $(".tabs .tab").click(function() { 
 
     swapin($(this)); 
 
    }); 
 
});

.tabs .tab{ 
 
    background-color: #7D135A; 
 
    border-radius: 2px 2px 0 0; 
 
    height: 50px; 
 
    width: 90px; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    padding-top: 5px; 
 
    padding-bottom: 0px; 
 
    color: #FFFFFF; 
 
\t cursor: pointer; 
 
} 
 

 
.contain { 
 
    width: 500px; 
 
    height: 200px; 
 
    border: 1px; 
 
    border-style: solid; 
 
    border-color: #7D135A; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tabs"> 
 
    <a click="swapin()" class="tab" data-tab-element="#1">One</a> 
 
    <a click="swapin()" class="tab" data-tab-element="#2">Two</a> 
 
    <a click="swapin()" class="tab" data-tab-element="#3">Three</a> 
 
</div> 
 
<div id="contain" class="contain"> 
 
    <div id="1" style="display: none;"> 
 
     One Content 
 
    </div> 
 
    <div id="2" style="display: none;"> 
 
     Two Content 
 
    </div> 
 
    <div id="3" style="display: none;"> 
 
     Three Content 
 
    </div> 
 
</div>

來源

2014-09-21 17:53:15 GramThanos

在DIV上更改背景顏色 - 用選項卡交換顏色

回答

相關問題