1

タブをクリックしたときのタブの色を設定したい。私のコードは次のとおりです。

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab-1</a></li>
    <li><a href="#tabs-2">Tab-2</a></li>
    <li><a href="#tabs-3">Tab-3</a></li>
    <li><a href="#tabs-4">Tab-4</a></li>
    <li><a href="#tabs-4">Tab-5</a></li>
  </ul>
  <div id="tabs-1">
    <p></p>
  </div>
  <div id="tabs-2">
    <p></p>
  </div>
  <div id="tabs-3">
    <p></p>
  </div>
  <div id="tabs-4">
    <p></p>
  </div>
  <div id="tabs-5">
    <input type="hidden" id="hidden" value="1"/>
  </div>
</div>

どうやってするの？

var value= "#ui-id-";
  var nithin = value +''+ $('#hidden').val();
   $(nithin).click(function () {
     $(nithin).css('background','red');
     var hidden=(parseInt('#hidden').val())+1;
     $('#hidden').val(hidden);
  });
4

3 に答える 3

0 
$('div#tabs ul li a').click(function() {

    $(this).parents('div#tabs').children('div').removeClass('activeColor');
    var theHref = $(this).attr('href');
    $('div#' + theHref).addClass('activeColor');

});

次に、必要な色を持つようにこれらの CSS クラスを定義するだけです

于 2013-04-26T16:13:27.500 に答える
0

CSS

#tabs ul li { float:left }
#tabs div { display:none; clear:both }
#tabs div.selected { display:block }

HTML

<div id="tabs">
    <ul>
        <li><a href="#tabs-1" class="selected">Tab-1</a></li>
        <li><a href="#tabs-2">Tab-2</a></li>
        <li><a href="#tabs-3">Tab-3</a></li>
      </ul>
      <div class="selected">tab 1 content</div>
      <div>tab 2 content</div>
      <div>tab 3 content</div>
</div>

JQuery

$(document).ready(function(){
        $('#tabs ul li a').click(function(){
            $('#tabs ul li, #tabs div').removeClass('selected');
            var x = $(this).parent().index();
            $(this).parent().addClass('selected');
            $('#tabs div:eq('+x+')').addClass('selected');
            return false;
    });
});

すべての一意の ID を必要とするわけではなく、JavaScript が対話する前にクラスを追加する必要もありません。

于 2013-04-26T17:14:22.517 に答える