Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery rel attribute
    primarykey
    data
    text
    <p>We have many links with <code>rel</code> attributes:</p> <pre><code>&lt;div class="team-tags"&gt; &lt;a class="s1" rel="t1 t2 t3" href="#"&gt;One&lt;/a&gt; &lt;a class="s2" rel="t2 t3" href="#"&gt;Two&lt;/a&gt; &lt;a class="s3" rel="t1" href="#"&gt;Three&lt;/a&gt; &lt;a class="s4" rel="t4 t6" ref="#"&gt;Four&lt;/a&gt; &lt;a class="s5" rel="t2 t5" href="#"&gt;Five&lt;/a&gt; &lt;/div&gt; </code></pre> <p>And one <code>ul</code>:</p> <pre><code>&lt;ul class="team"&gt; &lt;li class="t1"&gt;Some text&lt;/li&gt; &lt;li class="t2"&gt;Some text&lt;/li&gt; &lt;li class="t3"&gt;Some text&lt;/li&gt; &lt;li class="t4"&gt;Some text&lt;/li&gt; &lt;li class="t5"&gt;Some text&lt;/li&gt; &lt;li class="t6"&gt;Some text&lt;/li&gt; &lt;/ul&gt; </code></pre> <p><code>rel</code> of each link can have multiple values (like <code>class="value1 value2 value3 value4"</code>). Each value is used to mark similar <code>class</code> of <code>&lt;li&gt;</code>.</p> <p><code>rel="t2 t3"</code> marks <code>&lt;li class="t2"&gt;Some text&lt;/li&gt;</code> and <code>&lt;li class="t3"&gt;Some text&lt;/li&gt;</code>. And so on.</p> <p><strong>The main idea</strong> - when we <code>hover</code> any of these links, script should find <code>li</code>s with similar class inside <code>.team</code> list and toggle <code>active</code> class for them.</p> <p>For example, if we <code>hover</code> link with <code>rel="t4 t6"</code>, script should toggle class <code>active</code> for <code>&lt;li class="t4"&gt;Some text&lt;/li&gt;</code> and <code>&lt;li class="t6"&gt;Some text&lt;/li&gt;</code>, like <code>&lt;li class="t4 active"&gt;Some text&lt;/li&gt;</code> and <code>&lt;li class="t6 active"&gt;Some text&lt;/li&gt;</code>.</p> <p>jQuery 1.3.2 is used.</p> <p>Any idea?</p> <p>Thanks.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload