HTML Side menu

-

 <!DOCTYPE html>

<html>

<head>

<meta charset="ISO-8859-1">

<title>Product sheet </title>

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>


</head>

<body>

<div class="header">

     <h1>Product sheet </h1>

</div>

<div class="nav">

    <ul>

        <li><a href="#section-london">Product</a></li>

        <li><a href="#section-paris">click 2 </a></li>

         <li><a href="#section-london1">Click 3</a></li>

        <li><a href="#section-paris1">click 4 </a></li>

    </ul>

</div>

<div id="section-london" class="tab-content">

<h2>Product Details</h2>

<p>This will show you the product details.</p>

</div>

<div id="section-paris" class="tab-content">

<h2>Product Details 2</h2>

<p>This will show you the product details. 2</p>

</div>



<div id="section-london1" class="tab-content">

<h2>Product Details 3</h2>

<p>This will show you the product details.</p>

</div>

<div id="section-paris1" class="tab-content">

<h2>Product Details 4</h2>

<p>This will show you the product details. 2</p>

</div>



<style type="text/css">

.header {

    background-color:black;

    color:white;

    text-align:center;

    padding:5px;

}

.nav {

    line-height:30px;

    background-color:#eeeeee;

    height:300px;

    width:100px;

    float:left;

    padding:5px;

}

.active {

    font-weight:bold;

}

.section {

    width:350px;

    float:left;

    padding:10px;

}

.footer {

    background-color:black;

    color:white;

    clear:both;

    text-align:center;

    padding:5px;

}


</style>

<script type="text/javascript">

$(document).ready(function () {

    $('.nav ul li:first').addClass('active');

    $('.tab-content:not(:first)').hide();

    $('.nav ul li a').click(function (event) {

        event.preventDefault();

        var content = $(this).attr('href');

        $(this).parent().addClass('active');

        $(this).parent().siblings().removeClass('active');

        $(content).show();

        $(content).siblings('.tab-content').hide();

    });

});

</script>

</body>

</html>

Comments

Post a Comment

Popular posts from this blog

Converting JSONArray into CSV file in java

-
package com.loginController; import java.io.File; import org.apache.commons.io.FileUtils; import org.json.CDL; import org.json.JSONArray; import org.json.JSONObject; /**  *  * @author anand  *  */ public class ConvertArray {     public static void main(String myHelpers[]){         String jsonArrayString = "{\"fileName\": [{\"name\": \"Anand\",\"last\": \"Dwivedi\",\"place\": \"Bangalore\"}]}";         JSONObject output;         try {             output = new JSONObject(jsonArrayString);             JSONArray docs = output.getJSONArray("fileName");             File file=new File("JSONSEPERATOR.csv");             String csv = CDL.toString(docs);             FileUtils.writeStringToFile(file, csv);         ...
Read more

Java Design pattern

-
 Singleton Design pattern :-  it's Creational Design Pattern as we need to have only one instance of our class for Ex:- Logger,DBConnector. SingleObject class have its constructor as private and have a static instance of itself. Code:-  public class Singleton { private static Singleton object; private Singleton() { } public static synchronized Singleton getInstance() { if (object == null) object = new Singleton(); return object; } } Eager Initialization :-  public class Singleton { private static Singleton object = new Singleton(); private Singleton() { } public static Singleton getInstance() { return object; } } Double checked Locking :-  public class Singleton { private static volatile Singleton obj = null; private Singleton() { } public static Singleton getInstance() { if (obj == null) { synchronized (Singleton.class) { if (obj == null) obj = new Singleton(); } } ...
Read more

Map class field to map

-
 import java.lang.reflect.Field; import java.util.HashMap; import java.util.Map; public class AutogeneratedClassMapper {     public static Map<String, Object> mapFieldsToMap(Object obj) throws IllegalAccessException {         Map<String, Object> fieldMap = new HashMap<>();         Class<?> clazz = obj.getClass();         Field[] fields = clazz.getDeclaredFields();         for (Field field : fields) {             field.setAccessible(true);             Object value = field.get(obj);             fieldMap.put(field.getName(), value);         }         return fieldMap;     }     // Example usage     public static void main(String[] args) throws IllegalAccessException {         AutogeneratedClass au...
Read more