Javascript 代码（CSS3 x jQuery）升级提示

我刚刚开始网页设计，我已经想出了这个代码来滚动到同一页面中的某个位置

我不知道这是否可以或应该改进更长的时间，所以我想了解一些可以使这段代码更好的技巧

（我知道它很乱，稍后会清理它，只是想知道是否有更好的方法）

我感谢你给予的任何帮助！遵循代码

HTML jQuery

---

我注意到一件事，您可以改进jQuery函数，它可以简化为更少的代码行，如下所示：

$(document).ready(function () { // DOM is ready
       $('#Tecnologia').click(function () { // Click-function


           $(".ConHome, #BlankSpaceMenu, .ConTech").css(
               {'transition':'all 0.4s ease', 
                'transform': 'translateY(-50em)'}
           );

           $(".TopHeader").css(
               {'transition':'all 0.4s ease',
                'border-bottom-color':'rgba(0,0,255,1)'}
           );


       }) // Click-function
   }) // DOM is ready

请注意，您的8个css更改可以合并为2个，并且当它们用逗号分隔时，您可以将多个元素作为jQuery选择器

---

希望这有助于您编写更短、更易于管理的代码。

这个问题似乎离题了，因为它属于代码评审。嘿！谢谢这实际上对改进代码有很大帮助。另外，我可以更改slideUp/SlideDown系统的“translateY”和“transition”部分。@user3133486这是正确的！祝你好运和快乐：）

    #BlankSpaceMenu{
    position:relative;
    height:7em;
    width:100%;
    background-color:rgba(0,0,255,1);
    z-index:9;
    }
    .Container{
    position:relative;
    color:rgba(255,255,255,1);
    }
    .TopHeader{
     position:fixed;
    background-color:rgba(255,153,0,1);
    color:rgba(255,255,255,1);
    height:7em;
    width:100%;
    z-index:10000;
    border-bottom:rgba(0,0,0,1) dashed 10px;
    }
    .ConHome{
    position: relative;
    background-color: rgba(0,0,0,1);
    color: rgba(255,255,255,1);
    height: 50em;
    width: 100%;
    z-index:10;
    }
    .ConTech{
    position: relative;
    background-color:rgba(0,0,255,1);
    color:rgba(255,255,255,1);
    height: 50em;
    width: 100%;
    z-index:8;
    }

    $(document).ready(function(){
    $('#Tecnologia').click(function(){
    $(".ConHome").css('transition','all 0.4s ease');
    $(".ConHome").css('transform','translateY(-50em)');
    $("#BlankSpaceMenu").css('transition','all 0.4s ease');
    $('#BlankSpaceMenu').css('transform','translateY(-50em)');
    $(".ConTech").css('transition','all 0.4s ease');
    $(".ConTech").css('transform','translateY(-50em)');
    $(".TopHeader").css('transition','all 0.4s ease');
    $(".TopHeader").css('border-bottom-color','rgba(0,0,255,1)');
    })})

$(document).ready(function () { // DOM is ready
       $('#Tecnologia').click(function () { // Click-function


           $(".ConHome, #BlankSpaceMenu, .ConTech").css(
               {'transition':'all 0.4s ease', 
                'transform': 'translateY(-50em)'}
           );

           $(".TopHeader").css(
               {'transition':'all 0.4s ease',
                'border-bottom-color':'rgba(0,0,255,1)'}
           );


       }) // Click-function
   }) // DOM is ready