Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can achieve the same functionality by reducing the number of classes being used.</p> <p>And writing the same functionality in few lines of code.</p> <p>The only thing that I have added is use <strong>HTML-5 data-*</strong> attributes to store the class that relates to the link.</p> <p>I am just maintaining a single class and toggling that instead of replacing the existing class.</p> <p>Also you have too many repeated styles in your CSS which are not required. I took the liberty and cleaned up a bit. Can still be worked on to make it more efficient.</p> <p><strong>HTML</strong></p> <pre><code>&lt;aside&gt; &lt;div class=sidebar&gt; &lt;ul class=nav&gt; &lt;li class="home active" data-class="page_home"&gt;HOME&lt;/li&gt; &lt;li class="bye" data-class="page_bye"&gt;BYE&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/aside&gt; &lt;article&gt; &lt;div class="page_home show"&gt; &lt;div class="myhome"&gt; &lt;h1&gt;Home&lt;/h1&gt; &lt;p&gt;this is the index page&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="page_bye"&gt; &lt;div class="mybye"&gt; &lt;h1&gt;Goodbye&lt;/h1&gt; &lt;p&gt;this is bye page&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/article&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>body { width:1020px; margin:0 auto; position:absolute; } aside { float:left; display:block; width:20%; } article { float:right; display:block; margin-top:0; width:75%; } .page_home, .page_bye { visibility:hidden; } .show { visibility: visible; } .sidebar { margin-left:10px; } .nav { display:block; margin-top:60px; } ul { list-style-type:none; color:#000; } .nav &gt; li { background: #666 no-repeat; width:150px; height:65px; color:#000; } .nav &gt;li:hover { background:#06F no-repeat; } .nav &gt; li.active { background:#06F no-repeat; } </code></pre> <p><strong>Javascript</strong></p> <pre><code>$("ul.nav li").on('click', function (e) { var $this = $(this), // Class of the one to be shown clazz = $this.data("class"); // Add the active class to the li // and remove it for their siblings $this.addClass('active').siblings().removeClass('active'); // Remove the show class for all divs in articles $('article &gt; div').removeClass('show'); // Show only the div related to the class $('.' + clazz).addClass('show'); }); </code></pre> <p><strong><a href="http://jsfiddle.net/sushanth009/xug2z/1/" rel="nofollow">Check Fiddle</a></strong></p>
    singulars
    1. This table or related slice is empty.
    1. POclass not getting replaced
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USSushanth --
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POclass not getting replaced
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThis feels so good compared to where this started <3.
      singulars
      1. PO
      1. USnirazul
    2. CO@Nirazul.. The OP was trying to perform the same simple logic with swapping multiple classes which can get all messy as the number of elements increase
      singulars
      1. PO
      1. USSushanth --
    3. COOMG this is awesome ...thank u so much :)
      singulars
      1. PO
      1. USdimple
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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