更新一个简单的jQuery/CSS代码

Updating a simple jQuery / CSS code

本文关键字：jQuery CSS 代码 简单 一个 更新      更新时间：2023-09-26

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

a.） 所选项目为粗体

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

我愚蠢地以为我能解决a.）通过使用css中的：active属性，但只有点击链接时才有效。（一旦释放鼠标按钮，它就不见了。）就像b一样。），这可能只有使用jQuery才能实现？如果是这样的话，如果你能告诉我如何解决它，那就太好了。：）

代码：http://jsfiddle.net/KUtY5/1/

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();
    });
});

CSS

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

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>

更新的fiddle

您可以使用自定义类bold和以下代码来实现a）

CSS

.bold{ font-weight: bold;}

JS

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

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

希望这能有所帮助。

我为您的代码添加了一些额外的行，您可以从这里进行检查http://jsfiddle.net/KUtY5/483/.

你大胆地喜欢这个

$("#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();

另一方面，我建议您不要隐藏菜单容器。而是将元素隐藏在menu_container中。所以你可以把一个plcaeholder放在菜单容器中，然后隐藏它。

要想弄清楚这一点，必须提出/解决两个问题

  1. 你通常如何在页面上加粗文本。。。css对吗

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

    a。您可以在javascript中定义它。

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

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

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

如果您想选择选项a，请参阅.css（）方法

如果您想选择选项b，请参阅样式操作（特别是切换类）

请注意，上面参考文献中的例子应该能让你90%地理解它

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

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

JQuery每次需要进行更改时都会返回并搜索DOM$.(*element*)正在做而不仅仅是缓存它。

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

最重要的是，你必须对更多的元素进行更改（比如说，如果你使用css类选择器），你必须在上面添加更多的处理。

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

相关文章：