どのようにクラスを取得し、jqueryで別のクラスを追加しますか？

私は、ページに移動するときにページにアクティブなクラスを追加するコードの切り札を作成しようとしています。私は過去にこのIDを使っていましたが、うまくいきましたが、クラスが必要なので、ブートストラップ機能を使用できます。どのようにクラスを取得し、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を得ることができません。

出典

2017-12-02 megler

HTMLを追加してください。 –

https://jsfiddle.net/oqhp4b38/ - あなたは何が問題になっているか見当たりませんか？なぜあなたはIDで何かをする必要がありますか？あなたが示していないより多くのHTMLがない限り。 – ADyson

私は自分自身をよく説明しているとは思わない。私がしようとしているのは、アクティブなクラスをナビゲーションに追加して、ナビゲーションスタイルを変更することです。私はページに移動するときにクラスを動的に追加したい。私の問題は、IDのjQueryでこれを行う方法を知っているが、私はクラスを使用して動作させることはできません。私はブートストラップに入っているので、それ以外のクラスにする必要があります。すでに持っているものを使用します。それは理にかなっていますか？ – megler

IDは一意であると考えられているため、IDは本文にスコープする必要はありません。また、idを再割り当てしないでください。 .addClassを使用します。

出典

2017-12-02 19:29:07

クラスを切り替える場合は.toggleClass()、クラスを追加する場合は.addClass()をトグルしてみてください。

のは、私はID my-nav

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

を持って<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>

をクリックしたとき彼は、ボタンをもう一度それが上記削除する必要があります

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

または私はちょうどそれに

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

出典

2017-12-02 19:30:19

をクラスを追加したい場合は、私はこれについて完全な間違った道を行くと、誤った強制しようとしていたに変更されますコードを私のソリューションに追加してください。

ページが読み込まれたときに、自分のページにどのページがあるかを知り、そのページのnavリンクに「アクティブ」のCSSクラスを追加してリンクをスタイルに合わせることができるようにしたいと思っていました。ユーザーはサイト上のどこにいるかを知っていました。

私は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ですが、これは動作します。

出典

2017-12-02 23:55:14 megler

どのようにクラスを取得し、jqueryで別のクラスを追加しますか？

答えて

関連する問題