動態更改css中的「onlink」id

我在我的網站中製作了一個導航欄作爲選項卡，並且我使用了onlink身份來指定具有某些特徵的當前選項卡。我的問題是，當我更改標籤時，我不知道如何將以前的標籤ID設置爲none，並將當前的標籤設置爲onlink。動態更改css中的「onlink」id

這裏的導航欄代碼：

<div id="indNavBar"> 
<div id="indHolder"> 
<ul> 
<li><a onclick="DisplayDIV('IndPage');HideDIV('DoubleInd')" id="onlink">Single Indicator</a></li> 
<li><a onclick="DisplayDIV('DoubleInd');HideDIV('IndPage');">Double Indicators</a></li> 
</ul> 
</div> 
</div>

有一個簡單的方法，但它在某種程度上愚蠢的，這是爲了使每個當前選項卡的整個頁面，當我點擊另一個標籤，它只是給出的網址點擊標籤轉到頁面指定的onlink id，但這需要重新加載整個頁面，這就是爲什麼我尋求更好的解決方案。

來源

2012-07-04 Luna Alrawas

你可以得到控制的被點擊通過JavaScript方法

onclick="DisplayDIV('IndPage', this); 


function DisplayDIV(IndPage, sourceObj) 
{ 
    alert(sourceObj.id); 
}

來源

2012-07-04 09:52:26 Adil

對不起，但我不明白這個功能是什麼 –

你想知道在DisplayDIV中點擊哪個選項卡？如果是，那麼你會得到上面給出的功能 – Adil

對不起，但我想要做的是將點擊標籤ID設置爲「onlink」，其他設置爲「無」 –

你沒事不要使用jQuery庫通過this？如果是這樣，你可以避免把內聯JavaScript放入你的html中，並使用toggleClass http://api.jquery.com/toggleClass/

來源

2012-07-04 09:54:32 Rhyso

你正試圖以錯誤的方式使用HTML ID。

標識是HTML標籤的唯一標識符。它們不應在運行時更改。

相反，將CSS類應用到要顯示的選項卡上。

CSS

.hide {display:none;}

的Javascript

var indpage = document.getElementById("IndPage"); 
if (!indpage.classList.contains("hide")) { 
    indpage.classList.add("hide"); 
}

那麼你的HTML在運行時將變爲

<div id="IndPage" class="hide">...</div>

這是標準做法。
你可以用這個想法做更多。

我同意製作一個標籤整個頁面不是一個好主意。您可以使用JavaScript應用CSS類來隱藏和刪除該類以再次顯示。

它也是一個好主意，以瞭解如何從您的HTML分離您的JavaScript。請閱讀更多教程。其中如：Unobtrusive Javascript

來源

2012-07-04 10:10:50

這裏是一個jQuery的方式來做到這一點：http://jsfiddle.net/surendraVsingh/HyAhL/

$('#indHolder a').click(function(){ 

    $(this).attr('id', 'onlink'); 
    $(this).parent().siblings().find('a').removeAttr('id'); 
});

來源

2012-07-04 10:11:43 SVS

我把提示從上面的答案和它的工作，如下所示：

和標籤代碼是：

<div id="indNavBar"> 
<div id="indHolder"> 
    <ul> 
    <li><a onclick="DisplayDIV('IndPage');HideDIV('DoubleInd');putOnlink(this);" id="onlink">Single Indicator</a></li> 
    <li><a onclick="DisplayDIV('DoubleInd');HideDIV('IndPage');putOnlink(this);document.getElementById('onlink').id='none'">Double Indicators</a></li> 
    </ul> 
</div> 
</div>

我只是不想在第二個鏈接我不得不更改第一個鏈接的id兩次，因爲它沒有工作一次，也許導致其id被設置在標籤中，而不僅僅是單擊。

來源

2012-07-04 10:37:46

動態更改css中的「onlink」id

回答

相關問題