CODEWITHSUNDEEP
jquerytabs
Yurwix
Yurwix

Reputation: 19

Jquery Tab Content

Apologies if the answer is glaringly obvious.

I've been trying to implement Jquery in a project i've been working on but I can't seem to get these tabs to display their content correctly. 

<!DOCTYPE html>

<html lang="en">
<head>
    <title>Jquery Tabs</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/assignment14.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="jquery-1.11.2.js"></script>
    <script type="text/javascript" src="jquery/jquery-ui.min.js"></script>
    <script type="text/javascript" src="jquery/jquery-ui.js"></script>
    <link href="jquery/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function(){
            $('#main').tabs();
            });
    </script>

</head>

<body>
    <div id="outwrap">
        <header>
            <h1>Tabs</h1>
        </header>
        <div id="container3">
            <div id="container2">
                <div id="container1">
                    <section id="main">
                        <div id="details">
                            <ul class="tabs">
                                <li><a href="tab1">Tab 1</a></li>
                                <li><a href="tab2">Tab 2</a></li>
                                <li><a href="tab3">Tab 3</a></li>
                                <li><a href="tab4">Tab 4</a></li>
                            </ul>
                        <div id="tab1"><p>Content 1</p></div>
                        <div id="tab2"><p>Content 2</p></div>
                        <div id="tab3"><p>Content 3</p></div>
                        <div id="tab4"><p>Content 4</p></div>

</body>

Upvotes: 0

Views: 663

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

add # to href to be 

<ul class="tabs">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
    <li><a href="#tab4">Tab 4</a></li>
 </ul>

see source code http://jqueryui.com/tabs/ and see the Demo HERE

Upvotes: 1

Related Questions