我可以使用 Javascript 更改超链接和 CSS 吗？ [关闭]

Question

所以我想在用户单击选项卡时将 CSS id 设置为不同的。

我所有的部门都作为网站的布局）：

<a href="page.html"><div id="something"></div></a> <!-- this is one of my navigation tabs that I'll click on -->

我要修改这个导航标签：

<a href="page2.html"><div id="something2"></div></a>

我想将部门 id 更改为“something3”（并且“something3”已在我的 CSS 中定义）

另外，我想将链接更改为“page3.html”（已存在于我的文件夹中）。

所以我的问题是，我如何使用 javascript 更改这两个东西？

我已经有了：

function changeTab () {
    if (document.getElementById('something').clicked)
    {
        // change the css and link
    }
}

如果有人能提供帮助，我将不胜感激。

Answer 1

你可以这样做：

var el = document.getElementById('something')
el.id = 'something3';
el.href = 'newpage.html';

但是更改元素的id 通常会导致糟糕的设计，最好使用类。

Answer 2

我建议为您的元素添加一个 id 并使用类来实现 div 的样式。然后你可以这样做：

   //html
<a href="page.html" id="link"><div id="something">something</div></a> <!-- this is one 

    window.onload = (function(){
        var link = document.getElementById('link');
        link.onclick = (function(e){
          if(!link.href.indexOf('page2.html')){
         //continue as normal? 
}else{
           e.preventDefault();
           var childDiv = this.children[0];
           childDiv.id = 'something2';
          link.href= '/page3.html';
            //window.location = '/page3.html'; //uncomment this line to navigate to new page or use window.open to open a new page
}
        });
   });

（虽然我不是在这里更改课程，而是根据您的要求更改 id）

小提琴http://jsfiddle.net/nQr4p/

Answer 3

 var targetLink = document.getElementById('yourLinkObjId') // both elements should be givn ids 
  var targetDiv = document.getElementById('yourDivObjId')
  targetLink.href ='page2.html
  targetDiv.id = 'something2'

这些都应该放在你的更改函数中