1

我希望创建一个非常简单的功能，即单击菜单选项卡并更改颜色以让您知道您在哪个页面上。我是新手，所以请放轻松...大声笑

/ php头文件中的菜单/

<ul class="tabs" id="tabs">
  <li class="selected"><a href="http://bestofthebestent.com/index.php">Home</a></li>
  <li class="inactive"><a href="http://bestofthebestent.com/bio.php">Bio</a></li>
  <li class="inactive"><a href="http://bestofthebestent.com/photo.php">Photo</a></li>
  <li class="inactive"><a href="http://bestofthebestent.com/music.php">Thank</a></li>
  <li class="inactive"><a href="http://bestofthebestent.com/contact.php">Contact</a></li>
</ul>

/*This is the JavaScript file*/
window.onload = initPage;

function initPage() {
    var tabs = document.getElementById("tabs").getElementsByTagName("li");
    for (var i=0; i<tabs.length; i++){
        var links = tabs[i];
        links.onclick = tabClicked;
    }
}


function tabClicked(){
    var tabId = this.id;
    document.getElementById(tabId).classList.toggle("selected");
    var tabs = document.getElementById("tabs").getElementsByTagName("li");
    for (var i=0; i < tabs.length; i++){
        var currentTab = tabs[i];
        if (currentTab.id !== tabId){
            currentTab.class = "selected";
        } else {
            currentTab.class = "inactive";
        }
    }
}
4

5 回答 5

1

  1. 存储对每个列表项的引用。

  2. 创建一个变量来跟踪当前选项卡。

  3. 在每个元素的 onclick 函数中（或者您可以使用一次 onclick 并仅使用一些条件），通过使用setAttribute()方法更改元素的类属性。

像这样：

function onFirstTabClick() {
    clearSelected();
    tabVariable1.setAttribute("class","some-new-class");
}

function() clearSelected() {
    switch(currentSelectedTrackerVariable) {
case 1: tabVariable1.setAttribute("class","some-new-class");
break;
// Do this for the amount of tabs that you have.
}
}
于 2013-05-15T02:13:10.420 回答
1 
element.setAttribute("class", "className");
于 2013-05-15T02:16:55.127 回答
1

您ids在代码中使用，但您没有在标记中提供它。所以给li元素ID并试试这个。

function tabClicked(){
    var tabId = this.id;
    document.getElementById(tabId).classList.toggle("selected");
    var tabs = document.getElementById("tabs").getElementsByTagName("li");
    for (var i=0; i < tabs.length; i++){
        var currentTab = tabs[i];
        if (currentTab.id !== tabId){
            currentTab.className = "inactive";
        } else {
            currentTab.className= "selected";
        }
    }
}

JS 小提琴演示

于 2013-05-15T02:16:57.720 回答
0

Working FIDDLE Demo

无需全局定义函数。把它们都写在一个包里。下面的代码与您的 HTML 标记一起正常工作。

<script>
window.onload = function () {
    var tab = document.getElementById('tabs');
    var lis = tab.getElementsByTagName('li');

    for (var i = 0, l = lis.length; i < l; i++) {
        lis[i].onclick = function () {
            for (var j = 0; j < l; j++) {
                lis[j]["className"] = "inactive";
            }

            this["className"] = "selected";
        };
    }
};
</script>
于 2013-05-15T02:29:59.097 回答
-1

如果你使用 jQuery，那么tabClicked可以运行：

   jQuery('.selected').removeClass('selected').addClass('inactive');
   jQuery(this).removeClass('inactive').addClass('selected');
于 2013-05-15T02:12:27.603 回答