Question

我在我的网站上制作了导航栏作为标签，我使用onlink标识指定具有某些特征的当前标签。我的问题是，当我更改标签时，我不知道如何将之前的标签ID设置为无，并将当前标签设置为onlink。

这是导航条形码：

<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>

有一个简单的方法，但它有点愚蠢，这是将每个当前选项卡作为整个页面，当我单击另一个选项卡时，它只是给出了单击选项卡的URL，该选项卡转到具有指定的onlink id的页面，但是这个需要重新加载整个页面，这就是为什么我在寻求更好的解决方案。

Answer 1

您可以通过在javascript方法

中传递this来获取点击的控件

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


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

Answer 2

你还可以使用jQuery库吗？如果是这样，您可以避免将内联javascript放入html并使用toggleClass http://api.jquery.com/toggleClass/

Answer 3

您正试图以错误的方式使用HTML ID。

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类来隐藏和删除该类以再次显示。

了解如何将您的JavaScript与HTML分开也是一个好主意。请阅读更多关于此的教程。例如：Unobtrusive Javascript

Answer 4

这是一种jquery方法：http://jsfiddle.net/surendraVsingh/HyAhL/

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

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

Answer 5

我从上面的答案中得到了提示，它起到了以下作用：

function putOnlink(x){
document.getElementById('onlink').id = "none";
$(x).attr('id','onlink');
}

，标签代码为：

<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在标签中设置而不仅仅是在点击时。

动态更改css中的“onlink”id

5 个答案: