1

クリックした要素にクラスを追加/削除するためにjQuery関数を使用していますが、これはうまく機能します。ただし、その要素がクリックされたときに、HTML リンクのテキストを変更しようとしていますが、それが機能していないようです。<span>HTML リンクは、ページのさらに下の要素内にあります。

<button id="people">hasClass('user_view_active') の場合、HTML リンクは「People」を表示する必要があります。hasClass <button id="jobs">('user_view_active') の場合、HTML リンクは「Jobs」を表示する必要があります。

 <script type="text/javascript">
                $(document).ready(function() {
        $('button').click(function(){
            $('button').each(function(){
                $(this).removeClass('user_view_active'); 
            });
        $(this).addClass('user_view_active');
        });

        if ($('#people').hasClass('user_view_active')){
            $('.title').find("a").attr("href").text(text.replace('People'));
        }else{
            $('.title').find("a").attr("href").text(text.replace('Jobs'));
        }
    });
    </script>

</head>
<body>
<div id="container">

    <header>
            <img src="images/header-name.png" width="200px" style="display: inline; margin-bottom: -10px;"/>
            <button id="jobs" class="user_view"><a href="#">Jobs</a></button> 
            <button id="people" class="user_view_active user_view"><a href="#">People</a></button>

            <div class="header_search_wrapper">
                <form action="" method="POST">
                    <textarea class="header_search" name="app_search" placeholder="Search people, jobs, or companies" style="width: 430px;"></textarea>

                    <input type="submit" class="share_btn" value="Search">
                </form>
            </div>
    </header>

    <div id="main" role="main">
        <!--! begin app content -->

        <div class="right_sidebar">
        <span class="right_title">Connection Suggestions</title>


        </div>

        <span class="title">Recent Updates >> <a href="#">People</a></span>
4

3 に答える 3

3

リンク内のテキストを置き換えるには、 jQuery.text()関数を使用できます。この関数は、テキスト値を取得したり、テキスト値を設定したりすることもできます - 以下の例に示すように -

if ($('#people').hasClass('user_view_active')){
  $('.title').find("a").text('People'); 
}else{
  $('.title').find("a").text('Jobs'); 
}

このコードを機能させるには、クリック イベントのコールバック関数でラップする必要があります。

$(document).ready(function() {
  $('button').click(function(){
    $('button').removeClass('user_view_active'); 
    $(this).addClass('user_view_active');
    if ($('#people').hasClass('user_view_active')){
      $('.title').find("a").text('People');
    }else{
      $('.title').find("a").text('Jobs');
    }
  });
});

ボタンがクリックされるたびに、要素にuser_view_activeクラスが存在するかどうかを確認できます。#people

于 2012-07-25T22:09:06.530 に答える
1

オッケー ？

それらは正しいタグですか?

<span class="right_title">Connection Suggestions</title>

<a>要素内の<button>要素は良い考えですか?

<button id="jobs" class="user_view"><a href="#">Jobs</a></button>

role="main"は有効な属性ではありませんが、おそらく機能します。

これは簡単に思えます：

$(document).ready(function() {
    $('button').on('click', function(){
        $('button').removeClass('user_view_active');; 
        $(this).addClass('user_view_active');
        $("a", ".title").text(this.id);
    });
});

フィドル

于 2012-07-25T22:25:37.010 に答える