Javascript 将Jq转换为js

我不能将Jquery库添加到我的代码中，我必须使用js代码
有人能帮我把下面的代码转换成js吗
谢谢

<script type="text/javascript">
    $(function(){
        $("#gorightslide").click(function(){
            if(!$(this).is('.diactiveisbtn')){
                $(this).addClass('diactiveisbtn');
                $("#goleftslide").removeClass('diactiveisbtn');
                $("#oneblockshowblog").css({display:'none'});
                $("#twoblockshowblog").fadeIn(500);
            }
        });
        $("#goleftslide").click(function(){
            if(!$(this).is('.diactiveisbtn')){
                $(this).addClass('diactiveisbtn');
                $("#gorightslide").removeClass('diactiveisbtn');
                $("#twoblockshowblog").css({display:'none'});
                $("#oneblockshowblog").fadeIn(500);
            }
        });
    });
</script>

$（函数（）{
$（“#gorightslide”）。单击（函数（）{
如果（！$（this）.is（'.diactiveisbtn'））{
$（this.addClass（'diactiveisbtn'）；
$（“#goleftslide”）.removeClass（'diactiveisbtn'）；
$（“#oneblockshowblog”）.css（{display:'none}）；
$（“#twoblockshowblog”）.fadeIn（500）；
}
});
$（“#高尔夫滑道”）。单击（函数（）{
如果（！$（this）.is（'.diactiveisbtn'））{
$（this.addClass（'diactiveisbtn'）；
$（“#gorightslide”）.removeClass（'diactiveisbtn'）；
$（“#twoblockshowblog”）.css（{display:'none}）；
$（“oneblockshowblog”）.fadeIn（500）；
}
});
});

您在这里有一个误解，Jquery是用javascript编写的，因此，您的代码已经是javascript了。如果要在一个函数中使用此代码，只需删除第一行，它将如下所示：

<script type="text/javascript">
    function callingPlugin(){
        $("#gorightslide").click(function(){
            if(!$(this).is('.diactiveisbtn')){
                $(this).addClass('diactiveisbtn');
                $("#goleftslide").removeClass('diactiveisbtn');
                $("#oneblockshowblog").css({display:'none'});
                $("#twoblockshowblog").fadeIn(500);
            }
        });
        $("#goleftslide").click(function(){
            if(!$(this).is('.diactiveisbtn')){
                $(this).addClass('diactiveisbtn');
                $("#gorightslide").removeClass('diactiveisbtn');
                $("#twoblockshowblog").css({display:'none'});
                $("#oneblockshowblog").fadeIn(500);
            }
        });
    };
    callingPlugin(); // <-- Will execute the code
</script>

函数callingPlugin（）{
$（“#gorightslide”）。单击（函数（）{
如果（！$（this）.is（'.diactiveisbtn'））{
$（this.addClass（'diactiveisbtn'）；
$（“#goleftslide”）.removeClass（'diactiveisbtn'）；
$（“#oneblockshowblog”）.css（{display:'none}）；
$（“#twoblockshowblog”）.fadeIn（500）；
}
});
$（“#高尔夫滑道”）。单击（函数（）{
如果（！$（this）.is（'.diactiveisbtn'））{
$（this.addClass（'diactiveisbtn'）；
$（“#gorightslide”）.removeClass（'diactiveisbtn'）；
$（“#twoblockshowblog”）.css（{display:'none}）；
$（“oneblockshowblog”）.fadeIn（500）；
}
});
};
调用pluging（）；// 试试这个

    function yourfunction() {
  document.getElementById("gorightslide").onclick = function(event) {
    if(event.target.className != "diactiveisbtn"){
        event.target.classList = "diactiveisbtn";
        document.getElementById("goleftslide").classList = "";
        document.getElementById("oneblockshowblog").style.display = "none";
        document.getElementById("twoblockshowblog").style.display = "block"; // you can add here css animation (@keyframe)
    }
  }
  document.getElementById("goleftslide").onclick = function(event) {
    if(event.target.className != "diactiveisbtn"){
        event.target.classList = "diactiveisbtn";
        document.getElementById("gorightslide").classList = "";
        document.getElementById("twoblockshowblog").style.display = "none";
        document.getElementById("oneblockshowblog").style.display = "block"; // you can add here css animation (@keyframe)
    }
  }
}

您可以尝试以下方法：

$(function(){
    document.getElementById("gorightslide").click(function(){
        if(!hasClass(this, 'diactiveisbtn')){
            this.className += " diactiveisbtn";
            document.getElementById("goleftslide").className = document.getElementById("goleftslide").className.replace(/\diactiveisbtn\b/,'');
            document.getElementById("oneblockshowblog").style.display = "none";
            fadeIn(document.getElementById("twoblockshowblog"));
        }
    });
    document.getElementById("goleftslide").click(function(){
        if(!hasClass(this, 'diactiveisbtn')){
            this.className += " diactiveisbtn";
            document.getElementById("gorightslide").className = document.getElementById("gorightslide").className.replace(/\diactiveisbtn\b/,'');
            document.getElementById("twoblockshowblog").style.display = "none";
            fadeIn(document.getElementById("oneblockshowblog"));
        }
    });
});

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

function fadeIn(el) {
  el.style.opacity = 0;

  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
    last = +new Date();

    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };

  tick();
}

$（函数（）{
document.getElementById（“gorightslide”）。单击（函数（）{
如果（！hasClass（这是'diactiveisbtn'））{
this.className+=“diactiveisbtn”；
document.getElementById（“goleftslide”）.className=document.getElementById（“goleftslide”）.className.replace（/\diactiveisbtn\b/，“”）；
document.getElementById（“oneblockshowblog”）.style.display=“无”；
fadeIn（document.getElementById（“twoblockshowblog”）；
}
});
document.getElementById（“goleftslide”）。单击（函数（）{
如果（！hasClass（这是'diactiveisbtn'））{
this.className+=“diactiveisbtn”；
document.getElementById（“gorightslide”）.className=document.getElementById（“gorightslide”）.className.replace（/\diactiveisbtn\b/，“”）；
document.getElementById（“twoblockshowblog”）.style.display=“无”；
fadeIn（document.getElementById（“oneblockshowblog”）；
}
});
});
函数类（元素，cls）{
返回（“”+element.className+“”）.indexOf（“”+cls+“”）>-1；
}
功能fadeIn（el）{
el.style.opacity=0；
var last=+新日期（）；
var tick=函数（）{
el.style.opacity=+el.style.opacity+（新日期（）-last）/400；
最后=+新日期（）；
如果（+el.style.opacity<1）{
（window.requestAnimationFrame&&requestAnimationFrame（勾号））| |设置超时（勾号，16）；
}
};
勾选（）；
}
您试过什么吗？请注意stackoverflow不是代码转换服务和Java！=Javascript.getElementById（'id'）

可以替换为

文档。getElementById（'id'）

-然后你需要学习如何使用

。addEventListener

。classList

。style

-并为fadeIn玩偶制作一些css动画。。。所有那些带有

$（

的代码行都不是jquery？——几乎每一行代码都需要jquery库——他认为他对什么是jquery和什么是Javascript有误解……你说得对！