0

我以这种方式组织了我的标签：

<ul id="tabs">
    <li class="selected"><a href="#div1">DIV1</a></li>
    <li class><a href="#div2">DIV2</a></li>
    <li class><a href="#div3">DIV3</a></li>
</ul>
<div id="tabs_content">
    <div id="div1" style="display: block;"><textarea name="div1" rows="7" cols="108"></textarea></div>
    <div id="div2" style="display: none;"><textarea name="div2" rows="7" cols="108"></textarea></div>
    <div id="div3" style="display: none;"><textarea name="div3" rows="7" cols="108"></textarea></div>
</div>

我希望当我按下<li>元素内的一个链接时，对应的 Div 变为可见，display: block而其他的则更改为display: none
我也想对单击的<li>元素上的“选定”类执行相同的操作。

这可能吗？

我试过：

function selectTab(src)
{
    document.getElementById('div1').style.display = 'none';
    document.getElementById('div2').style.display = 'none';
    document.getElementById('div3').style.display = 'none';
    document.getElementById(src).style.display = 'block';
}

如果我通过引用传递 ID，它会起作用，onclick=""但我想避免这种情况。

解决方案：

function selectTab(source, parent)
{
    document.getElementById('div1').style.display = 'none';
    document.getElementById('div2').style.display = 'none';
    document.getElementById('div3').style.display = 'none';
    document.getElementById(source).style.display = 'block';

    var elements = [].slice.apply(document.getElementsByClassName('selected'));
    for (var i = 0; i < elements.length; i++) {
        elements[i].className = '';
    }

    parent.className = 'selected';
}
4

3 回答 3

1

可能这就是你想要的，跨浏览器（IE5.5+）

CSS

.selected {
    background-color: green;
}
.hide {
    display: none;
}

HTML

<ul id="tabs">
    <li class="selected"><a href="#div1">DIV1</a>

    </li>
    <li class><a href="#div2">DIV2</a>

    </li>
    <li class><a href="#div3">DIV3</a>

    </li>
</ul>
<div id="tabs_content">
    <div id="div1">
        <textarea name="div1" rows="7" cols="108"></textarea>
    </div>
    <div id="div2" class="hide">
        <textarea name="div2" rows="7" cols="108"></textarea>
    </div>
    <div id="div3" class="hide">
        <textarea name="div3" rows="7" cols="108"></textarea>
    </div>
</div>

javascript

var tabs = document.getElementById("tabs"),
    tabs_content = document.getElementById("tabs_content"),
    divs = tabs_content.getElementsByTagName("div"),
    divsLength = divs.length,
    lis = tabs.getElementsByTagName("li"),
    lisLength = lis.length;

tabs.onclick = function (evt) {
    var e = evt || window.event,
        target = e.target || e.srcElement,
        href,
        id,
        index,
        div;

    if (target.tagName.toUpperCase() === "A") {
        for (index = 0; index < lisLength; index += 1) {
            lis[index].className = "";
        }

        target.parentNode.className = "selected";
        href = target.attributes.href.nodeValue;
        if (href && href.charAt(0) === "#") {
            id = href.slice(1);
            for (index = 0; index < divsLength; index += 1) {
                div = divs[index];
                if (id === div.id) {
                    div.className = "";
                } else {
                    div.className = "hide";
                }
            }
        }
    }
};

jsfiddle

于 2013-09-29T17:04:42.937 回答
0

您的selectTab函数需要绑定到click这些列表元素上的事件。没有其他方法可以做到。你的代码已经足够好了。您也可以使用 JQuery 来简化事情，正如这里的一些其他答案所指出的那样。

好的，这样做：

在您的 HTML 中，为每个标签添加“tab”类。

<li class="selected"><a class="tab" href="#div1">DIV1</a></li>
<li class><a class="tab" href="#div2">DIV2</a></li>
<li class><a class="tab" href="#div3">DIV3</a></li>

在你的jQuery中，

$('.tab').click(function(){
var displaydiv = $(this).attr('href');
$('#div1').hide();
$('#div2').hide();
$('#div3').hide();
$(this).show();
$('"'+displaydiv+'"').show();
$(this).parent().attr('class','selected');
})
于 2013-09-29T15:57:46.800 回答
0 
<ul id="tabs">
    <li class="selected"><a onclick="showTab(this);" href="#div1">DIV1</a></li>
    <li><a onclick="showTab(this);" href="#div2">DIV2</a></li>
    <li><a onclick="showTab(this);" href="#div3">DIV3</a></li>
</ul>
<div id="tabs_content">
    <div id="div1" style="display: block;"><textarea name="div1" rows="7" cols="108"></textarea></div>
    <div id="div2" style="display: none;"><textarea name="div2" rows="7" cols="108"></textarea></div>
    <div id="div3" style="display: none;"><textarea name="div3" rows="7" cols="108"></textarea></div>
</div>

使用以下 JavaScript：

function showTab(a)
{
    var id = a.href.replace('#','');
    var tabs = document.getElementById('tabs_content').getElementsByTagName('div');
    var index = -1;
    for(var i=0,n=tabs.length;i<n;i+=1)
    {
        var t = tabs[i];
        if(t.id === id)
        {
            t.style.display = 'block';
            index = i;
        }
        else
        {
            t.style.display = 'none';
        }
    }
    var links = document.getElementById('tabs').getElementsByTagName('li');
    for(var i=0,n=links.length;i<n;i+=1)
    {
        links[i].setAttribute('class', index === i ? 'selected' : '');
    }
}

当然你也可以先缓存你的菜单和标签，这样你就可以保留一个变量。这是正确的方法：

function Menu()
{
    var self = this;
    self.links = document.getElementById('tabs').getElementsByTagName('a');
    self.tabs = document.getElementById('tabs_content').getElementsByTagName('div');
    self.selectedIndex = 0;
    self.n = self.links.length;

    for(var i=0;i<self.n;i+=1)
    {
        // Set onclick for every link in the tabs-menu
        self.links[i].onclick = function(ind){return function(){self.update(ind);};}(i);
    }

    self.update = function(ind)
    {
        // Hide previous tab
        self.links[self.selectedIndex].parentNode.setAttribute('class', '');
        self.tabs[self.selectedIndex].style.display = 'none';

        // Select and show clicked tab
        self.selectedIndex = ind;
        self.links[self.selectedIndex].parentNode.setAttribute('class', 'selected');
        self.tabs[self.selectedIndex].style.display = 'block';
    };
}
setTimeout(function(){new Menu();},1);

查看 jsfiddle 中的 Menu 类：http: //jsfiddle.net/3vf4A/1/。请注意，即使禁用了 Javascript，a-tag 仍然会通过自动滚动到正确的区域来引导您。

于 2013-09-29T16:21:06.753 回答