在javascript中按类显示隐藏标记（带和不带JQuery）

更新： 在检查了另一个之后，我决定尝试JQuery方法。所以我相应地更新了代码。我相信有一个3行的方法来获得我用300所做的

前3个锚点有一个javascript函数，它显示3个文本：T1、T2和T3，每个文本按时间显示。最后两个定位显示并隐藏标记类ET（额外文本）

.active{颜色：红色；}
.T2、.T3{显示：无；}

||
|

嗨，我是MaryHi，我是SonyaHi，我是Katty
我爱苹果我爱橘子我爱香蕉
唱歌、游泳、走路
Lorem ipsum dolor sit amet，是一位杰出的领导者

前庭是欧洲狮子座的

这是我在根本不了解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>

$（文档）.ready（函数（）{
$（'mary，'long'）.addClass（'active'）；
$（'#mary'）。单击（函数（事件）{
event.preventDefault（）；
$（'.T2，.T3'）.hide（）；
$（'.T1'）.show（）；
$（this.addClass（'active'）；
$（'katty，'sonya'）。removeClass（'active'）；
});
$（“#sonya”）。单击（函数（事件）{
event.preventDefault（）；
$（'.T1，.T3'）.hide（）；
$（'.T2'）.show（）；
$（this.addClass（'active'）；
$（'mary，'katty'）。removeClass（'active'）；
});
$（'#katty'）。单击（函数（事件）{
event.preventDefault（）；
$（'.T1，.T2'）.hide（）；
$（'.T3'）.show（）；
$（this.addClass（'active'）；
$（'mary，'sonya'）。removeClass（'active'）；
});
$（'#short'）。单击（函数（事件）{
event.preventDefault（）；
$（'.ET'）.hide（）；
$（this.addClass（'active'）；
$（'#long'）。removeClass（'active'）；
});
$（'#long'）。单击（函数（事件）{
event.preventDefault（）；
$（'.ET'）.show（）；
$（this.addClass（'lumi'）；
$（'#short'）.removeClass（'lumi'）；
});
});

看起来您正在尝试使用一些新函数来原型化Javascript窗口对象，我认为这是不可能的。只需将它们定义为函数，您就会得到更好的结果。

我似乎真的不知道您的代码中有什么错误，但我可以问一下您为什么要修改样式表吗？ 我的意思是..如果我这样做，我会尝试另一种方法：不修改样式表，而是将新样式附加到元素。
问题是，对于同一个元素，可以有多个具有多个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"; } } 函数修改显示（类名，显示）{ //display是一个布尔值，指示显示或隐藏类的天气 var el=document.getElementsByTagName（'span'）；

---

对于（var i=0，l=el.length；iI，在文档中使用class=“ET”时，请参见show（'.TE'）。如果要以这种方式使用show/hide方法，则必须在样式表中定义类“.TE”。如果只想显示或隐藏一个特定元素，则可以为该元素指定一个ID，并使用document.getElementById（ID）。style.display=“无”隐藏它。谢谢，这是我的错误。在根级别定义函数myFunc（）与添加myFunc（）的效果相同到窗口对象。我不认为他试图原型化窗口…他只是想确保他的功能是全局的。你给我的方法是我以前从未见过的。你认为这适用于主浏览器吗？它应该适用于所有浏览器，尽管你可能需要更改某些内容以获得最佳效果您：您应该在所有跨距上添加一个伪类：“嗨，我是玛丽”，以便不影响页面中所有跨距的显示，并更改行var el=document.getElementsByTagName（'span'）；其中var el=document.getElementsByClassName（'dummyClass'）； 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); }; function show(className){ $('span').hide(); $('.'+className).show(); }