2017-12-02 82 views
0

我正在尝试创建一个代码片段,当您导航到该页面时,它将为页面添加一个活动类。我过去曾经用过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添加活动类。

+0

请添加您的HTML。 –

+0

https://jsfiddle.net/oqhp4b38/ - 很难看到你有什么问题?你为什么需要对ID做任何事情?除非你还没有显示更多的HTML。 – ADyson

+0

我不认为我很好地解释自己。我想要做的是添加一个活动的类到我的导航,所以它改变导航样式。我想要在导航到页面时动态添加课程。我的问题是我知道如何用jQuery中的ID做到这一点,但我不能使用类来使它工作。因为我处于引导阶段,所以我需要它成为一门课程,否则我会使用我已有的课程。那有意义吗? – megler

回答

0

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

0

尝试使用.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'); 
0

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

当一个页面加载时,我希望我的代码知道我在哪个页面上,并向该页面的导航链接添加一个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,但这个工程。

相关问题