你如何抓住一个类并在jquery中添加另一个类？

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试创建一个代码片段，当您导航到该页面时，它将为页面添加一个活动类。我过去曾经用过ID，它工作正常，但我现在需要类，所以我可以使用Bootstrap功能。你如何抓住一个类并在jquery中添加另一个类？

var mybodyid = $('body').attr('id'); 
var mynavid = '#nav' + mybodyid; 
$(mynavid).attr('id', 'active');

我试过改变一切从'id'到类和#nav到.nav，但没有运气。我猜我会改变最后一行：

$(mynavid).addClass('active');

，但不知道如何处理线1做和2

HTML：

<html> 
    <body id="home"> 
    <nav id="navhome"> 
    </body> 
</html>

的工作代码将增加除了navhome之外还有一个“有效”的ID。我需要将所有转换为类而不是ID。我的意思是我知道我需要将所有的HTML id转换为类。我只是无法让JS添加活动类。

回答：

由于IDS应该是独一无二的，世界上没有必要将其范围，以身体。另外，不要重新分配ID。使用.addClass。

回答：

尝试使用.toggleClass()如果您想要在类和.addClass()之间切换，如果您只想添加类。

比方说，我有一个<nav>有一个ID my-nav

<nav id="my-nav"> 
<ul> 
<li>menu 1 </li> 
<li>menu 2</li> 
<li>menu 3</li> 
</ul> 
</nav>

，我想，当我点击一个按钮，导航应该有一流的.active

$("#my-nav").toggleClass('active');

的上述变化

<nav id="my-nav" class="active"> 
    <ul> 
    <li>menu 1 </li> 
    <li>menu 2</li> 
    <li>menu 3</li> 
    </ul> 
    </nav>

当我点击t他按钮再次应该上述去除将更改为

<nav id="my-nav"> 
<ul> 
<li>menu 1 </li> 
<li>menu 2</li> 
<li>menu 3</li> 
</ul> 
</nav>

，或者如果我只想补充类它

$("#my-nav").addClass('active');

回答：

我要对此完全错误的方式，并试图迫使不正确代码到我的解决方案。这是我想要做的：

当一个页面加载时，我希望我的代码知道我在哪个页面上，并向该页面的导航链接添加一个CSS“active”类，这样我就可以以某种方式用户知道他们在网站上的位置。

我知道如何用CSS ID做到这一点，但不能用类。以下是如何做到这一点：

HTML - 注意，链接是相对的，不是绝对的：

<nav> 
    <ul> 
    <li><a href="home.html">Home</a></li> 
    <li><a href="contact.html">Contact</a></li> 
    <li><a href="about.html">About</a></li> 
    </ul> 
</nav>

的Jquery：

function(){ 
// set active link in nav 
// credit: https://www.johnmorrisonline.com/add-active-navigation-class-to-menu-item-based-on-url-using-jquery/ 
// Get current path and find target link 
var path = window.location.pathname.split("/").pop(); 
// Account for home page with empty path 
if (path == '') { 
    path = 'index.php'; 
} 
var target = $('nav a[href="' + path + '"]'); 
// Add active class to target link 
target.addClass('active');  
}

我敢肯定有一种方法，使其与工作一个绝对的URL，但这个工程。

以上是 你如何抓住一个类并在jquery中添加另一个类？ 的全部内容， 来源链接： utcz.com/qa/257866.html

回到顶部