在jquery的ui-tabs中查找活动选项卡并更改颜色[重复]

Posted 2023-05-08

【中文标题】在jquery的ui-tabs中查找活动选项卡并更改颜色[重复]

【英文标题】：Find active tab in ui-tabs in jquery and change color [duplicate]

【发布时间】：2018-06-25 14:21:22

【问题描述】：

当我单击选项卡时，必须更改 li 的颜色。我试图删除以前的活动类并将活动类添加到当前 li。但不工作。

<script>
  $(document).ready(function () 
    $('.Tabs').tabs();
);

$('#tabs ul li a').click(function()
    $(this).prev().find('li.Active').removeClass('Active');
  $(this).find('li').addClass('Active');
);
</script>

我已附上 jsfiddle https://jsfiddle.net/0frr7qn2/6/

【参考方案1】：

我已对您的 jQuery 进行了一些更正，以便为您提供所需的结果：

$('#tabs ul li').click(function()
  $(this).addClass('Active').siblings().removeClass('Active');
);

#tabs 
  border-top: 1px solid silver;
  border-bottom: 1px solid silver;
  border-right: white;
  background-color: #002750;
  color: white;


#tabs ul 
  padding: 6px 0 24px;
  margin: 0;


#tabs ul li 
  list-style-type: none;
  float: left;
  margin: 0 30px;
  cursor: pointer;


#tabs ul li.Active a 
  color: #b32218;


#tabs 
  display: block;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="Tabs">
  <div id="tabs">
    <ul>
      <li class="Active">
        <a href="#tab1">Information</a>
      </li>
      <li>
        <a href="#tab2">Accounting</a>
      </li>
      <li>
        <a href="#tab3">Tax Performance</a>
      </li>
    </ul>
  </div>
  <div id="tab1" class="Tab" style="display:none">
    <p>Tab 1 Content</p>
  </div>
  <div id="tab2" class="Tab" style="display:none">
    <p>Tab 2 Content</p>
  </div>
  <div id="tab3" class="Tab" style="display:none">
    <p>Tab 3 Content</p>
  </div>
</div>

我已将 代码 优化为尽可能短。由于li 上有.Active 类，我已将目标 更改为#tabs ul li，以便您可以利用.siblings() 方法。

【参考方案2】：

我在这里分叉了你的 jsfiddle：https://jsfiddle.net/g5t3xhj1/

它有效，这就是我所做的：

更新了您的 css 以在 a href 而不是 li 上拥有活动类 更新了您的 jQuery 以在单击时删除所有活动类并将其添加回仅单击的类

html

    <div class="Tabs">
  <div id="tabs">
    <ul>
      <li>
        <a class="active" href="#tab1">Information</a>
      </li>
      <li>
        <a href="#tab2">Accounting</a>
      </li>
      <li>
        <a href="#tab3">Tax Performance</a>
      </li>
    </ul>
  </div>
  <div id="tab1" class="tab" style="display:none">
    <p>Tab 1 Content</p>
  </div>

  <div id="tab2" class="tab" style="display:none">
    <p>Tab 2 Content</p>
  </div>

  <div id="tab3" class="tab" style="display:none">
    <p>Tab 3 Content</p>
  </div>
</div>

JS

 $(document).ready(function() 
   //Hide all Tabs on laod
   $('.Tabs').tabs();

 );

 $('#tabs ul li a').click(function() 
   $('#tabs ul li a').removeClass('active');
   $(this).addClass('active');
 );

CSS

li a.active 
  color: red;


#tabs 
  border-top: 1px solid silver;
  border-bottom: 1px solid silver;
  border-right: white;
  background-color: #002750;
  color: white;


#tabs ul 
  padding: 6px 0 24px;
  margin: 0;


#tabs ul li 
  list-style-type: none;
  float: left;
  margin: 0 30px;
  cursor: pointer;


#tabs ul li.Active a 
  color: #b32218;


#tabs 
  display: block;

【参考方案3】：

我认为你误解了prev() 的功能，它不会让你成为父母，而是跟随：

“获取前一个同级...” (jQuery docs)

您需要的是 parent() ，它将为您提供单击元素的父级（请参阅 docs) ，结合 siblings() （Docs) 它将为您提供所需的选项卡行为。

此外，我已将 outline: none 添加到 .#tabs ul li.Active a，以删除活动选项卡的默认轮廓样式（如果要保留它，只需删除 CSS 中的注释行）。

见下面的 sn-p

$(document).ready(function() 
  $('.Tabs').tabs();

);

$('#tabs ul li a').click(function() 
  var $parent = $(this).parent();

  $parent.siblings().removeClass('Active');
  $parent.addClass('Active');
);

#tabs 
  border-top: 1px solid silver;
  border-bottom: 1px solid silver;
  border-right: white;
  background-color: #002750;
  color: white;


#tabs ul 
  padding: 6px 0 24px;
  margin: 0;


#tabs ul li 
  list-style-type: none;
  float: left;
  margin: 0 30px;
  cursor: pointer;


#tabs ul li.Active a 
  color: #b32218;
  outline: none; /* Remove this to leave the default outline functionality */


#tabs 
  display: block;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="Tabs">
  <div id="tabs">


    <ul>
      <li class="Active">
        <a href="#tab1">Information</a>
      </li>
      <li>
        <a href="#tab2">Accounting</a>
      </li>
      <li>
        <a href="#tab3">Tax Performance</a>
      </li>
    </ul>
  </div>
  <div id="tab1" class="Tab" style="display:none">
    <p>Tab 1 Content</p>
  </div>

  <div id="tab2" class="Tab" style="display:none">
    <p>Tab 2 Content</p>
  </div>

  <div id="tab3" class="Tab" style="display:none">
    <p>Tab 3 Content</p>
  </div>
</div>

【讨论】：

很好的解释..感谢您的宝贵时间..