How to Make Tab View On Click Event In Content Blog

This time I will discuss how to create Tab View On Click event, this article outlines the command On Click Event we will be more modest in the display of text  and not have to work hard in java script. Before we discuss how to make it pay attention to the following example :

Preview 

to make it follow the steps below
to make it very simple note the HTML code below

<div id="Button1" onclick="document.getElementById('Content1').style.display='block';Content2.style.display='none';Content3.style.display='none';">Button 1</div>
<div id="Button2" onclick="document.getElementById('Content1').style.display='none';Content2.style.display='block';Content3.style.display='none';">Button 2</div>
<div id="Button3" onclick="document.getElementById('Content1').style.display='none';Content2.style.display='none';Content3.style.display='block';">Button 3</div>
<div id="Content1">
<p>
Enter some content here.
</p>
</div>
<div id="Content2">
<p>
Enter some content here.
</p>
</div>
<div id="Content3">
<p>
Enter some content here.
</p>
</div>

Note on Button1, there we show Content1 (display = 'block') to hide content2 and Content3 (display = 'none'). For Button2 we show content2 by hiding Content1 and Content3. So even with Button3 we show Content3 by hiding Content1 and content2.

certainly not very easy to understand?? new course for you to learn HTML code definitely can also follow this, okay the next step in order to obtain results as in the example above also copy the css code below. You can change the size of the tables that you create by clicking the edit css 

#Button1,#Button2{margin-top:-30px;padding:0;text-align:center;float:left;border:1px solid #aaa;background:#ddd;cursor:pointer;width:32%;height:25px;line-height:25px}
#Button2{margin-left:34%}
#Button3{margin-top:-30px;margin-right:-2px;padding:0;text-align:center;float:right;border:1px solid #aaa;background:#ddd;cursor:pointer;width:32%;height:25px;line-height:25px}
#Content1{display:block;width:100%;height:300px;padding:0;margin:40px auto;border:1px solid #aaa;text-align:left;background:#fff; overflow: auto;}
#Content2,#Content3{display:none;width:100%;height:300px;padding:0;margin:40px auto;border:1px solid #aaa;text-align:left;background:#fff; overflow: auto;}
#Content1 p,#Content2 p,#Content3 p{margin:10px}

for an application depends on what you want to make, you can directly apply the Tab View this on your website, in addition that the Tab View has also been responsive

Source : Kompi Ajaib

Share this

Anonymous