Question

我有这个脚本需要运行一个标签（jquery）。主要是我需要隐藏一些div并添加类（你肯定已经明白了）。

如何以更优雅和可读的方式编写？

function fun1(){
$('#tab1 a').addClass('selected');
$('#tab2 a').removeClass('selected');
$('#tab3 a').removeClass('selected');

document.getElementById('div1').style.display='block';
document.getElementById('div2').style.display='none';
document.getElementById('div3').style.display='none';
}
function fun2(){
$('#tab1 a').removeClass('selected');
$('#tab2 a').addClass('selected');
$('#tab3 a').removeClass('selected');

document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='block';
document.getElementById('div3').style.display='none';
}
function fun3(){
$('#tab1 a').removeClass('selected');
$('#tab2 a').removeClass('selected');
$('#tab3 a').addClass('selected');

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

window.onload = function() {
    document.getElementById('tab1').onclick=fun1;
    document.getElementById('tab2').onclick=fun2;
    document.getElementById('tab3').onclick=fun3;

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

Answer 1

您可以尝试这样的事情：

var tabs, divs;
function handler(n) {
    return function fun() {
        for(var i=0, l=tabs.length; i<l; ++i)
            tabs[i].find('a').toggleClass('selected', n==i);
        for(var i=0, l=divs.length; i<l; ++i)
            divs[i].toggle(n==i);
    };
}
window.onload = function() {
    tabs = [$('#tab1'), $('#tab2'), $('#tab3')];
    divs = [$('#div1'), $('#div2'), $('#div3')];
    for(var i=0, l=tabs.length; i<l; ++i)
        tabs[i].on('click', handler(i));
    tabs[0].click();
}

Demo

Answer 2

你应该避免重复你的代码。一个能够处理所有事情的单一功能怎么样：

function tab(id){

    $('#tab1').parent().children().removeClass('selected'); // remove selected class from all tabs
    $('#tab' + id).addClass('selected'); // add just to one we need

    $('#div1').parent().children().hide(); // hide all the #div elements
    $('#div' + id).show(); // show the one we need
}

我所做的更改的注意事项：

selected类现在应用于#tab元素，而不是其中的锚点
我认为所有#tabs和#divs都是其容器中唯一的兄弟姐妹
要更改有效标签，只需拨打tab(1)，tab(2)等等...

以下是我的方法的一个简单示例：http://jsfiddle.net/CkpwT/1/

Answer 3

因此，每个页面都有一个标签。点击后，您还要为点击的元素添加“选定”类。

<强> PLAYGROUND

您所需要的只是这个简单的HTML标记：

  <ul id="tabs">
    <li><a href="#">Tab1</a></li>
    <li><a href="#">Tab2</a></li>
    <li><a href="#">Tab3</a></li>
  </ul>

  <div id="divs">
    <div>Div1</div>
    <div>Div2</div>
    <div>Div3</div>
  </div>

比您只需获取所点击标签的index值并打开相同的索引DIV元素：

$tabs = $('#tabs a'); // Cache your selectors
$divs = $('#divs > div');

$tabs.click(function(e) {
  e.preventDefault(); // prevent browser from following anchor href
  $tabs.removeClass('active');
  $(this).addClass('active');
  $divs.hide().eq( $tabs.index(this) ).show(); // Get the Tab element index and refer to the DIV using .eq()
}).eq(0).click();  // Trigger the initial click on a desired tab index(0)

Tab功能改进。

3 个答案: