Javascript 更新简单的jQuery/CSS代码

我希望有人能帮我解决这个简单的问题：我刚刚开始学习jQuery，并找到了一个代码来显示选择项后隐藏的文本。 我想对其进行更新，以便：

a.）所选项目为粗体

b.）我可以添加占位符文本，而不是从一个空白的隐藏文本字段开始

我愚蠢地认为我可以通过使用css中的：active属性来解决a.），但这只在点击链接时起作用。（只要松开鼠标按钮，它就消失了。）就像b。）一样，这可能也只有通过使用jQuery才能实现？如果是这样的话，如果你能告诉我如何解决它，那就太好了。：）

代码：

JS

 $(document).ready(function(){
    $("#nav a").click(function(){
      var id =  $(this).attr('id');
      id = id.split('_');
      $("#menu_container div").hide(); 
      $("#menu_container #menu_"+id[1]).show();
    });
});

#menu_container {
 width: 650px;
 height: auto;
 padding-left: 30px;
}
#menu_container div {
 display:none;
}

.bold{ font-weight: bold;}

 $(this).addClass('bold').siblings('a').removeClass('bold');

CSS

 $(document).ready(function(){
    $("#nav a").click(function(){
      var id =  $(this).attr('id');
      id = id.split('_');
      $("#menu_container div").hide(); 
      $("#menu_container #menu_"+id[1]).show();
    });
});

#menu_container {
 width: 650px;
 height: auto;
 padding-left: 30px;
}
#menu_container div {
 display:none;
}

.bold{ font-weight: bold;}

 $(this).addClass('bold').siblings('a').removeClass('bold');

HTML

<div id='nav'>
    <a id="show_apps">Appetizers</a> | <a id="show_soups">Soups and Salads</a> | <a id="show_entrees">Entrees</a>
</div>

<div id="menu_container">
    <div id="menu_apps">
    Content of the App Section Here
    </div>
    <div id="menu_soups">
    Content of the Soups Section Here
    </div>
    <div id="menu_entrees">
    Content of the Entrees Section Here
    </div>
</div>

开胃菜|汤和沙拉|主菜
这里是应用程序部分的内容
汤的内容在这里
主菜部分的内容在这里

例如，您可以使用自定义类

bold

和以下代码实现a）：

CSS

 $(document).ready(function(){
    $("#nav a").click(function(){
      var id =  $(this).attr('id');
      id = id.split('_');
      $("#menu_container div").hide(); 
      $("#menu_container #menu_"+id[1]).show();
    });
});

#menu_container {
 width: 650px;
 height: auto;
 padding-left: 30px;
}
#menu_container div {
 display:none;
}

.bold{ font-weight: bold;}

 $(this).addClass('bold').siblings('a').removeClass('bold');

JS

 $(document).ready(function(){
    $("#nav a").click(function(){
      var id =  $(this).attr('id');
      id = id.split('_');
      $("#menu_container div").hide(); 
      $("#menu_container #menu_"+id[1]).show();
    });
});

#menu_container {
 width: 650px;
 height: auto;
 padding-left: 30px;
}
#menu_container div {
 display:none;
}

.bold{ font-weight: bold;}

 $(this).addClass('bold').siblings('a').removeClass('bold');

---

对于b）我在代码中找不到任何文本字段

---

希望这有帮助。

我在代码中添加了一些额外的行，您可以从这里查看

你这样大胆吗

$("#nav a").css("font-weight", 400); // First you make them thin
$(this).css("font-weight", 800); // Than you make them bold

你像这样放置占位符

<div id="placeholder">
  Placeholder
</div>
$("#placeholder").hide();

占位符
$（“#占位符”）.hide（）；

---

另一方面，我建议您不要隐藏菜单容器。而是隐藏菜单容器中的元素。因此，您可以将plcaeholder放入菜单容器中，并将其隐藏。

要解决此问题，必须提出/解决两个问题

你通常如何在页面上加粗文本。。。对吧?

您希望在哪里定义这些样式？有两个地方：

a。您可以在javascript中定义它

b。您可以通过常规方法（内联、外部、嵌入）在css项目中定义它

有什么区别？如果在javascript中定义它，则代码是自包含的。我的意思是，您可以将JS代码从一个项目复制/粘贴到下一个项目，而不必担心从样式表或其他源复制相关样式，因为它们都在您编写的JQuery中

相反，如果您在javascript之外的常规位置定义它，代码可能不是自包含的，但是有些人发现在特定项目的范围内管理它更容易，因为您的所有css都包含在一个位置（通常是外部样式表）

如果您想选择a选项，请参阅

如果您想选择选项b，请参见（特别是切换类）

请注意，上述参考资料中的示例将帮助您理解它的90%

---

最后几句话。学习Jquery，但我建议您尽量远离它，因为它实现了DOM抖动而不是DOM缓存（sizzle引擎）

我们将在第一个视频中简要介绍为什么Jquery在性能上很差，本系列的其余部分将介绍如何创建模块化的vanilla JS

每次需要进行更改时，JQuery都会返回并搜索DOM

$（*element*）

正在执行，而不仅仅是缓存它

DOM中的节点越多，用于搜索的处理能力就越强（因为它必须遍历整个树）

除此之外，您必须对更多的元素进行更改（例如，如果您使用css类选择器），您必须在此基础上添加更多的处理

---

如果你在桌面上，所有这些都很好，但是移动平台呢？你从哪里得到这些处理能力？。。。它不存在。

在你的代码中找不到任何文本字段。你可以考虑这一点，让它做你的重磅感。你已经在使用jQuery了，谢谢你这么多时间！作品很棒：）@TimVanGorp不客气：）。如果您能接受此解决方案，我将不胜感激：）非常感谢您提供的有用建议和清晰的文档，Matthew，我非常感谢您花时间发布此内容。希望你有一个美好的新年：）没问题，希望你尽快开始香草JS。