Tab is out of focus on clicking outside <p>I have a webpage with four tabs. It is working fine except when I click outside the div,containing the tabs and its contents, the focus on the active tab is lost which is not desired.</p> <p><strong>Code</strong></p> <pre><code>&lt;body&gt; &lt;img src="images/2.png" style="width: 950px; height: 60px;"&gt; &lt;div style="margin-top: -50px; margin-left: 5px; position: absolute; font-size: 32px; color: green;"&gt;Test &lt;/div&gt; &lt;div style="width: 69px; height: 57px; margin-left: 951px; margin-top: -58px;"&gt; &lt;a href="#" title="Logout"&gt;&lt;img src="images/logout.png" style="width: 78px; height: 73px;"&gt;&lt;/a&gt; &lt;/div&gt; &lt;div style="margin-top: 100px;"&gt; &lt;ul id="tabs" class="tab"&gt; &lt;li&gt;&lt;a id="load" href="#" class="tablinks" onclick="openTab(event, 'Reference')"&gt;Reference&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="tablinks" onclick="openTab(event, 'TestStrategy')"&gt;Test Strategy&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="tablinks" onclick="openTab(event, 'TestCase')"&gt;Test Case&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="tablinks" onclick="openTab(event, 'TestSummary')"&gt;Test Summary&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;img src="images/line.png" style="margin-top: -14px; margin-left: 6px; width: 700px; height: 4px; position: absolute;"&gt; &lt;div id="Reference" class="tabcontent"&gt; &lt;p&gt;Document_1.docx&lt;/p&gt; &lt;hr align="left"&gt; &lt;p&gt;Document_2.docx&lt;/p&gt; &lt;hr align="left"&gt; &lt;p&gt;Document_3.docx&lt;/p&gt; &lt;hr align="left"&gt; &lt;/div&gt; &lt;div id="TestStrategy" class="tabcontent"&gt; &lt;p&gt;TS_1.docx&lt;/p&gt; &lt;hr align="left"&gt; &lt;p&gt;TS_2.docx&lt;/p&gt; &lt;hr align="left"&gt; &lt;/div&gt; &lt;div id="TestCase" class="tabcontent"&gt; &lt;p&gt;TC_1.xlsx&lt;/p&gt; &lt;hr align="left"&gt; &lt;p&gt;TC_2.xlsx&lt;/p&gt; &lt;hr align="left"&gt; &lt;p&gt;TC_3.xlsx&lt;/p&gt; &lt;hr align="left"&gt; &lt;p&gt;TC_4.xlsx&lt;/p&gt; &lt;hr align="left"&gt; &lt;p&gt;TC_5.xlsx&lt;/p&gt; &lt;hr align="left"&gt; &lt;/div&gt; &lt;div id="TestSummary" class="tabcontent"&gt; &lt;p&gt;Summary_1.docx&lt;/p&gt; &lt;hr align="left"&gt; &lt;p&gt;Summary_2.pdf&lt;/p&gt; &lt;hr align="left"&gt; &lt;p&gt;Summary_3.ppt&lt;/p&gt; &lt;hr align="left"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>Here is a <a href="http://jsfiddle.net/heh9ptvy/" rel="nofollow">fiddle</a>.</p> <p>How to resolve this?</p>