在javascript中顯示隱藏標記（帶和不帶JQuery）

已過時的：在檢查另一個working example後，我決定嘗試一個JQuery aproach。所以我相應地更新了代碼。我相信有一個3線方式來得到我所做的300.在javascript中顯示隱藏標記（帶和不帶JQuery）

前3個錨點有一個JavaScript函數，顯示3個文本：T1，T2和T3，每一個都是時間。最後2個錨點顯示並隱藏標記類ET（額外文本）。

<style type="text/css"> 
.active{color:red;} 
.T2,.T3{display:none;} 
</style> 

<ul> 
<li><a href="#" id="mary">Show Text 1</a> | <a href="#" id="sonya">Show Text 2</a> | <a href="#" id="katty">Show Text 3</a></li> 
<li><a href="#" id="short">Hide Text 4</a> | <a href="#" id="long">Show Text 4</a></li> 
</ul> 

<h1><span class="T1">Hi, I am Mary</span><span class="T2">Hi, I am Sonya</span><span class="T3">Hi, I am Katty</span></h1> 
<h2><span class="T1">I love apples</span><span class="T2">I love oranges</span><span class="T3">I love bannanas</span></h2> 
<h3><span class="T1">And singing</span><span class="T2">And swimming</span><span class="T3">And walking</span></h3> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 

<p><span class="ET">Vestibulum hendrerit justo eu leo.</span></p>

這是我能不知道JQuery的所有圖片：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#mary, #long').addClass('active'); 
    $('#mary').click(function(event){ 
     event.preventDefault(); 
     $('.T2, .T3').hide(); 
     $('.T1').show(); 
     $(this).addClass('active'); 
     $('#katty, #sonya').removeClass('active'); 
    }); 
    $('#sonya').click(function(event){ 
     event.preventDefault(); 
     $('.T1, .T3').hide(); 
     $('.T2').show(); 
     $(this).addClass('active'); 
     $('#mary, #katty').removeClass('active'); 
    }); 
    $('#katty').click(function(event){ 
     event.preventDefault(); 
     $('.T1, .T2').hide(); 
     $('.T3').show(); 
     $(this).addClass('active'); 
     $('#mary, #sonya').removeClass('active'); 
    }); 
    $('#short').click(function(event){ 
     event.preventDefault(); 
     $('.ET').hide(); 
     $(this).addClass('active'); 
     $('#long').removeClass('active'); 
    }); 
    $('#long').click(function(event){ 
     event.preventDefault(); 
     $('.ET').show(); 
     $(this).addClass('lumi'); 
     $('#short').removeClass('lumi'); 
    }); 
}); 
</script>

來源

2011-01-19 Roger

我在使用class =「ET」的文檔中看到show（'。TE'）。如果你想以這種方式使用show/hide方法，那麼你必須在樣式表中定義類「.TE」。如果您只想顯示或隱藏某個特定元素，則可以給該元素一個ID，並使用document.getElementById（id）.style.display =「none」來隱藏它。 – 2011-01-19 18:59:44

謝謝，這是我的錯誤。 – Roger 2011-01-19 20:36:53

我真的不知道你的代碼有什麼問題，但我可以問你爲什麼要修改樣式表？我的意思是......如果我這樣做，我會嘗試一種不同的方法：不要修改樣式表，而是將新樣式附加到元素。
問題是，您可以爲多個可以覆蓋對方的相同元素使用多個css聲明的樣式表。在這種情況下，你的功能不會有最小的工作機會。
我想實現這樣的：

function modifyDisplay(className,display){ 
//display is a boolean indicating weather to display the class or to hide it 
    var el = document.getElementsByTagName('span'); 
    for(var i=0,l=el.length;i<l;i++) 
    { 
     var classes = el.getAttribute('class').split(' '); 
     var hasClass = false; 
     for(var c in classes) 
     if(classes[c] == className) 
      { 
      el.style.display = display ? "inline" : "none"; 
      hasClass = true; 
      break; 
      } 
     if(!hasClass) 
     el.style.display = !display ? "inline" : "none"; 
    } 
}

然後你可以創建「快捷方式」，以隱藏&顯示：

 
var show = function(className){ 
    return modifyDisplay(className,true); 
}; 
var hide = function(className){ 
    return modifyDisplay(className,false); 
};

，當然如果你願意在什麼的JavaScript庫可以做採取高峯， jQuery的所有這些可以寫成如下：

 
function show(className){ 
    $('span').hide(); 
    $('.'+className).show(); 
}

哦，另一件事，當你在全局範圍內聲明一個函數或變量（有或沒有「var」關鍵字），它會自動附加到「窗口」對象。你沒有必要明確這樣做。
對不起，如果我被帶走了;我希望這是你正在尋找的。

來源

2011-01-19 18:50:19

它看起來像你試圖原型JavaScript Window對象有了一些新的功能，我不認爲是可能的。只要將它們定義爲函數，你應該得到更好的結果。

來源

2011-01-19 16:13:31

在根級別定義函數myFunc（）與將myFunc（）添加到窗口對象的效果相同。 – 2011-01-19 19:06:38

在javascript中顯示隱藏標記（帶和不帶JQuery）

回答

相關問題