如何使javascript函数更改文本的颜色？

我正在尝试建立一个网站。而且，在我的网站上，在菜单页面上，我希望我的菜单选项根据单击的菜单更改颜色。例如，当页面加载时，它会自动在main上启动，因此main按钮是绿色的。但是，当我单击vegoption时，我希望vegoption变为绿色，mainoption变为黑色。其他选项采用相同的系统。 如果我在javascript中做错了，请原谅我。我对这门语言很陌生。如果有任何其他的改进我可以做，请让我知道

代码如下：

/* Start Variables */

:root {
  --aa-color: #57C324;
}


/* End Variables */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Source Sans Pro', sans-serif;
}


/* Start Navbar */

.navbar-wrapper {
  // background: blue;
  padding: 20px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 5px 10px 8px #888888;
  z-index: 100;
  position: relative;
}

.leftside {
  // background: green;
  width: 50%;
  height: 10px;
}

.rightside {
  width: 50%;
  // background: red;
}

.options {
  // background: yellow;
  text-decoration: none;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.linkhome {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkmenu {
  font-size: 120%;
  text-decoration: none;
  color: var(--aa-color);
  ;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkabout {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkfood {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkculture {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkmenu:hover {
  color: var(--aa-color);
}

.linkabout:hover {
  color: var(--aa-color);
}

.linkfood:hover {
  color: var(--aa-color);
}

.linkculture:hover {
  color: var(--aa-color);
}


/* End Navbar */


/* Start Main */

.injera-menu {
  background-size: cover;
  overflow: hidden;
  width: 100%;
  height: 10%;
  display: block;
}

.ourmenutext {
  position: absolute;
  margin-top: -25%;
  font-size: 400%;
  background: -webkit-linear-gradient(#10CB00, #10CB00, #FFC701, #FF0101, #FF0101);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 3px white;
  -webkit-text-stroke: 3px black;
  margin-left: 3%;
}

.menuoptions {
  display: flex;
  width: 100%;
  justify-content: center;
}

.mainoption {
  margin: 2% 5%;
  color: var(--aa-color);
}

.vegoption {
  margin: 2% 5%;
}

.specialoption {
  margin: 2% 5%;
}

.drinksoption {
  margin: 2% 5%;
}

.vegoption:hover {
  color: var(--aa-color)
}

.specialoption:hover {
  color: var(--aa-color)
}

.drinksoption:hover {
  color: var(--aa-color)
}


/* Start Menu */

.menu {
  position: relative;
}


/* Start Main Menu */

.menumain {
  justify-content: center;
  color: var(--aa-color);
  dis
}

.price {
  float: right;
  border: 1px solid var(--aa-color);
  padding: 1% 2%;

}

.dishtitle {
  margin-left: 40%;
  text-decoration: underline;
}

.dishinfo {
  padding: 5% 10%;
  font-size: 150%;
}

.menu-item {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
    justify-content: center;
}

.menuveg {
    width: 100%;
  justify-content: center;
  color: var(--aa-color);
  display: none;
}

.one-pers, .two-pers, .three-pers, .four-pers{
     margin: 4% 40%;
   display: flex;
}

.perstext{
  width: 50%;
  margin-right: 20%;
}

.persprice{
  width: 50%;
  float: left;
}

.menuspecial {
    width: 100%;
  justify-content: center;
  color: var(--aa-color);
  display: none;
}

.dishinfo2 {
  padding: 5% 10%;
  font-size: 150%;
  text-decoration: none;
  text-align: center;
}
/* End Menu */


/* End Main */

Addis Abeba |菜单
菜单
主要
素食主义者
特别的
饮料
瑞士法郎21-

基沃特
用特制的香料黄油调制的嫩肉片，用洋葱和青椒调味，撒上大蒜和姜。
23瑞士法郎-

多罗沃特酒店
用特别调味的红酱汁和埃塞俄比亚黄油烹制的鸡肉。
23瑞士法郎-

耶贝格沃特酒店
用特殊的香草黄油调制的羊肉，用洋葱和青椒调味，撒上大蒜和姜。
25瑞士法郎-

基托
塔塔牛排，埃塞俄比亚风格，用特殊的红辣椒和香料黄油调味
24瑞士法郎-

牛肉条
用洋葱和胡椒炒的牛肉条。
24瑞士法郎-

羊肉提布
羊肉块用巴特、洋葱、青椒和黑胡椒炒。
瑞士法郎17-

西罗
用特制的酱汁烹制的黄色分裂豌豆，混合成带有香料的果泥。
瑞士法郎17-

烤玉米
在加香料的酱汁中煮的裂扁豆。
瑞士法郎16-

戈门
用香料黄油、洋葱和各种异国辣椒烹制的各种辛辣切碎蔬菜。
素食品尝菜单
1人
22瑞士法郎-

2人
44瑞士法郎-

3人
瑞士法郎66-

4人
88瑞士法郎-

亚的斯亚贝巴阿贝巴特别酒店
包括：
Tibs、Yebuegue Alicha、Doro Woot和扁豆或蔬菜的选择
2人
瑞士法郎52-

3人
78瑞士法郎-

4人
99瑞士法郎-

品尝菜单
包括：
Tibs、Yebuegue Alicha、Doro Woot、Kitfo和扁豆或蔬菜的选择
2人
60瑞士法郎-

3人
90瑞士法郎-

4人
115瑞士法郎-

函数showmain（）{
document.getElementsByClassName（“menumain”）[0].style.display=“inline block”；
document.getElementsByClassName（“menuveg”）[0].style.display=“无”；
document.getElementsByClassName（“menuspecial”）[0].style.display=“无”；
document.getElementsByClassName（“menudrinks”）[0].style.dis
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Addis Abeba | Menu</title>
  <link rel="stylesheet" href="/css/menu.css">
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
</head>

<body>
  <!-- Start Navbar -->
  <nav>
    <div class="navbar-wrapper">
      <div class="leftside">

      </div>
      <div class="rightside">
        <div class="options">
          <a href="#" class="linkhome">Home</a>
          <a href="menu.html" class="linkmenu">Menu</a>
          <a href="#" class="linkabout">About Us</a>
          <a href="#" class="linkfood">Our Food</a>
          <a href="#" class="linkculture">Ethiopian Culture</a>
        </div>
      </div>
    </div>
  </nav>
  <!-- End Navbar -->

  <!-- Start Main -->
  <div class="our-menu">
    <div class="ourmenusection">
      <div class="img1">
        <img src="img/injera.png" alt="injera" class="injera-menu">
      </div>
      <div class="text-ourmenu">
        <h1 class="ourmenutext">

          Menu</h1>
      </div>
    </div>
  </div>

  <div class="menuoptions">
    <h2 class="mainoption">Main</h2>
    <h2 class="vegoption" onclick="showveg()">Vegetarian</h2>
    <h2 class="specialoption" onclick="showspecial()">Special</h2>
    <h2 class="drinksoption" onclick="showspecial()">Drinks</h2>
  </div>

  <div class="menu">

    <!-- Start Main Menu -->
    <div class="menumain">
      <div class="menu-item">
        <div class="price">
          <p>CHF 21.-</p>
        </div>
        <div class="dishtitle">
          <h1>Key Wat</h1>
        </div>
        <div class="dishinfo">
          Tender morsels of meat prepared in specially spiced butter, seasoned with onions and green peppers, sprinkled with garlic and ginger.
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 23.-</p>
        </div>
        <div class="dishtitle">
          <h1>Doro Wat</h1>
        </div>
        <div class="dishinfo">
          Chicken cooked in specially seasoned red sauce and Ethiopian butter.
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 23.-</p>
        </div>
        <div class="dishtitle">
          <h1>Yebeg Wat</h1>
        </div>
        <div class="dishinfo">
          Morsels of lamb prepared in special herb butter, seasoned with onions and green peppers and sprinkled with garlic and ginger.
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 25.-</p>
        </div>
        <div class="dishtitle">
          <h1>Kitfo</h1>
        </div>
        <div class="dishinfo">
          Steak tartare, Ethiopian style, seasoned with special hot red pepper and spiced butter
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 24.-</p>
        </div>
        <div class="dishtitle">
          <h1>Beef Tibs</h1>
        </div>
        <div class="dishinfo">
          Strips of beef sauteed with onion and pepper.
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 24.-</p>
        </div>
        <div class="dishtitle">
          <h1>Lamb Tibs</h1>
        </div>
        <div class="dishinfo">
          Cubes of lamb fried in buter, onions, green and black peppers.
        </div>
      </div>
    </div>

    <!-- Start Vegetarian Menu -->

    <div class="menuveg">
      <div class="menu-item">
        <div class="price">
          <p>CHF 17.-</p>
        </div>
        <div class="dishtitle">
          <h1>Shiro</h1>
        </div>
        <div class="dishinfo">
          Yellow split peas cooked in special sauce and blended into a puree flavored with spices.
                </div>
            </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 17.-</p>
        </div>
        <div class="dishtitle">
          <h1>Misir</h1>
        </div>
        <div class="dishinfo">
          Cracked lentil cooked in spiced sauce.
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 16.-</p>
        </div>
        <div class="dishtitle">
          <h1>Gomen</h1>
        </div>
        <div class="dishinfo">
          Assortment  of spicy chopped vegetables cooked in spiced butter, onions and various kinds of exotic peppers.
        </div>
      </div>

      <div class="menu-item">
        <div class="dishtitle" style="margin-left: 30%;">
          <h1>Vegetarian Tasting Menu</h1>
        </div>

        <div class="pers">
            <div class="one-pers">
                <div class="perstext">
                    <h3>1 Pers</h3>
                </div>
                        <div class="persprice">
                            <div class="price">
                      <p>CHF 22.-</p>
                    </div>
                        </div>
            </div>

                    <div class="two-pers">
                <div class="perstext">
                    <h3>2 Pers</h3>
                </div>
                        <div class="persprice">
                            <div class="price">
                      <p>CHF 44.-</p>
                    </div>
                        </div>
            </div>

                    <div class="three-pers">
                <div class="perstext">
                    <h3>3 Pers</h3>
                </div>
                        <div class="persprice">
                            <div class="price">
                      <p>CHF 66.-</p>
                    </div>
                        </div>
            </div>

                    <div class="four-pers">
                <div class="perstext">
                    <h3>4 Pers</h3>
                </div>
                        <div class="persprice">
                            <div class="price">
                      <p>CHF 88.-</p>
                    </div>
                        </div>
            </div>
        </div>
      </div>
    </div>

    <!-- Start Special Menu -->

    <div class="menuspecial">
      <div class="menu-item">
        <div class="dishtitle">
          <h1>Addis Abeba Special</h1>
        </div>
        <div class="dishinfo2">
          <h3>Includes:</h3>
          Tibs, Yebuegue Alicha, Doro Woot and choice of Lentils or Vegetables
        </div>
        <div class="pers">
                    <div class="two-pers">
                <div class="perstext">
                    <h3>2 Pers</h3>
                </div>
                        <div class="persprice">
                            <div class="price">
                      <p>CHF 52.-</p>
                    </div>
                        </div>
            </div>

                    <div class="three-pers">
                <div class="perstext">
                    <h3>3 Pers</h3>
                </div>
                        <div class="persprice">
                            <div class="price">
                      <p>CHF 78.-</p>
                    </div>
                        </div>
            </div>

                    <div class="four-pers">
                <div class="perstext">
                    <h3>4 Pers</h3>
                </div>
                        <div class="persprice">
                            <div class="price">
                      <p>CHF 99.-</p>
                    </div>
                        </div>
            </div>
        </div>
      </div>

      <div class="menu-item">
        <div class="dishtitle">
          <h1>Tasting Menu</h1>
        </div>
        <div class="dishinfo2">
          <h3>Includes:</h3>
          Tibs, Yebuegue Alicha, Doro Woot, Kitfo and choice of Lentils or Vegetables
        </div>
        <div class="pers">
                    <div class="two-pers">
                <div class="perstext">
                    <h3>2 Pers</h3>
                </div>
                        <div class="persprice">
                            <div class="price">
                      <p>CHF 60.-</p>
                    </div>
                        </div>
            </div>

                    <div class="three-pers">
                <div class="perstext">
                    <h3>3 Pers</h3>
                </div>
                        <div class="persprice">
                            <div class="price">
                      <p>CHF 90.-</p>
                    </div>
                        </div>
            </div>

                    <div class="four-pers">
                <div class="perstext">
                    <h3>4 Pers</h3>
                </div>
                        <div class="persprice">
                            <div class="price">
                      <p>CHF 115.-</p>
                    </div>
                        </div>
            </div>
        </div>
      </div>
    </div>
  </div>

  <!-- End Main -->
    <!-- Start JS -->

    <script type="text/javascript">

   function showmain() {
     document.getElementsByClassName("menumain")[0].style.display = "inline-block";
     document.getElementsByClassName("menuveg")[0].style.display = "none";
     document.getElementsByClassName("menuspecial")[0].style.display = "none";
     document.getElementsByClassName("menudrinks")[0].style.display = "none";
     document.getElementsByClassName("mainoption")[0].style.color = "#57C324";
     document.getElementsByClassName("vegoption")[0].style.color = "black";
     document.getElementsByClassName("specialoption")[0].style.color = "black";
     document.getElementsByClassName("drinksoption")[0].style.color = "black";
   }

     function showveg() {
         document.getElementsByClassName("menumain")[0].style.display = "none";
         document.getElementsByClassName("menuveg")[0].style.display = "inline-block";
       document.getElementsByClassName("menuspecial")[0].style.display = "none";
       document.getElementsByClassName("menudrinks")[0].style.display = "none";
       document.getElementsByClassName("mainoption")[0].style.color = "black";
       document.getElementsByClassName("vegoption")[0].style.color = "#57C324";
       document.getElementsByClassName("specialoption")[0].style.color = "black";
       document.getElementsByClassName("drinksoption")[0].style.color = "black";
   }

   function showspecial() {
      document.getElementsByClassName("menumain")[0].style.display = "none";
      document.getElementsByClassName("menuveg")[0].style.display = "none";
      document.getElementsByClassName("menuspecial")[0].style.display = "inline-block";
      document.getElementsByClassName("menudrinks")[0].style.display = "none";
      document.getElementsByClassName("mainoption")[0].style.color = "black";
      document.getElementsByClassName("vegoption")[0].style.color = "black";
      document.getElementsByClassName("specialoption")[0].style.color = "#57C324";
      document.getElementsByClassName("drinksoption")[0].style.color = "black";
    }

   function showdrinks() {
      document.getElementsByClassName("menumain")[0].style.display = "none";
      document.getElementsByClassName("menuveg")[0].style.display = "none";
      document.getElementsByClassName("menuspecial")[0].style.display = "none";
      document.getElementsByClassName("menudrinks")[0].style.display = "inline-block";
      document.getElementsByClassName("mainoption")[0].style.color = "black";
      document.getElementsByClassName("vegoption")[0].style.color = "black";
      document.getElementsByClassName("specialoption")[0].style.color = "black";
      document.getElementsByClassName("drinksoption")[0].style.color = "#57C324";

    }
    </script>

    <!-- End JS -->
</body>

</html>

<head>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
</head>

$(".vegoption").click(function(){
    // do something when .vegoption is clicked
})

$(".vegoption").click(function(){
    $(this).css("background-color", "green");
})

$(document).ready(function(){
    $(".mainoption").css("background-color", "green");
})