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>

要素内のリンクの 1 つを押すと<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 で、各タグに「タブ」クラスを追加します。

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

実際の Menu クラスの jsfiddle を確認してください: http://jsfiddle.net/3vf4A/1/。Javascript が無効になっている場合aでも、-tag を使用すると、自動的にスクロールして正しい領域に移動できることに注意してください。

于 2013-09-29T16:21:06.753 に答える