动态更改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

回答

相关问题