ค้นหาแท็บที่ใช้งานอยู่ใน ui-tab ใน jquery และเปลี่ยนสี [ซ้ำกัน]

เมื่อฉันคลิกแท็บ สีของ 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/


html jquery css jquery-ui jquery-ui-tabs
person Sindhu    schedule 16.01.2018    source แหล่งที่มา

คำตอบ (3)


arrow_upward
3
arrow_downward

ฉันได้แก้ไข 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="/th#tab1">Information</a>
      </li>
      <li>
        <a href="/th#tab2">Accounting</a>
      </li>
      <li>
        <a href="/th#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>

ฉันได้ปรับ โค้ด ให้สั้นที่สุดเท่าที่จะทำได้ เนื่องจากคุณมี .Active คลาส บน li ฉันจึงได้เปลี่ยน เป้าหมาย เป็น #tabs ul li เพื่อให้คุณสามารถใช้ประโยชน์จาก .siblings() วิธีการ ได้

person VXp    schedule 16.01.2018

arrow_upward
1
arrow_downward

ฉันแยก jsfiddle ของคุณที่นี่: https://jsfiddle.net/g5t3xhj1/

มันได้ผล นี่คือสิ่งที่ฉันทำ:

  • อัปเดต css ของคุณให้มีคลาสที่ใช้งานอยู่บน a href แทนที่จะเป็น li
  • อัปเดต jQuery ของคุณเพื่อลบคลาสที่ใช้งานอยู่ทั้งหมดเมื่อคลิกและเพิ่มกลับเป็นคลาสที่คลิกเท่านั้น

HTML

    <div class="Tabs">
  <div id="tabs">
    <ul>
      <li>
        <a class="active" href="/th#tab1">Information</a>
      </li>
      <li>
        <a href="/th#tab2">Accounting</a>
      </li>
      <li>
        <a href="/th#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');
 });

ซีเอสเอส

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;
}
person Nathaniel Flick    schedule 16.01.2018

arrow_upward
1
arrow_downward

ฉันคิดว่าคุณเข้าใจผิดเกี่ยวกับฟังก์ชันของ prev() นิดหน่อย มันจะไม่ทำให้คุณเข้าใจผู้ปกครอง แต่ต่อไปนี้:

"รับพี่น้องที่อยู่ก่อนหน้าทันที..." (เอกสาร jQuery)

สิ่งที่คุณต้องการคือ parent() ซึ่งจะให้พาเรนต์ขององค์ประกอบที่คุณคลิก (ดู เอกสาร) เมื่อรวมกับ siblings() (เอกสาร) จะทำให้คุณได้รับพฤติกรรมที่ต้องการสำหรับแท็บของคุณ

นอกจากนี้ ฉันได้เพิ่ม outline: none ลงใน .#tabs ul li.Active a เพื่อลบรูปแบบโครงร่างเริ่มต้นสำหรับแท็บที่ใช้งานอยู่ (หากคุณต้องการเก็บไว้ เพียงลบบรรทัดที่มีความคิดเห็นภายใน CSS)

ดูตัวอย่างด้านล่าง

$(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="/th#tab1">Information</a>
      </li>
      <li>
        <a href="/th#tab2">Accounting</a>
      </li>
      <li>
        <a href="/th#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>

person Ramiz Wachtler    schedule 16.01.2018
comment
คำอธิบายที่ดี .. ขอบคุณสำหรับเวลาของคุณ .. - person Sindhu; 16.01.2018