Need help making tab page in HTML

Question

I am working on making a page that has multiple tabs each tab has different content in it. I looked online for tutorials and found this site http://inspirationalpixels.com/tutorials/creating-tabs-with-html-css-and-jquery . I have been following it, i have tweaked the settings to how I want it to look however when I try to click on a different tab nothing changes. I am still pretty new to jquery so I am a little confused in that field and I was hoping someone could help me out and let me know what to do.

The problem is that the tab are not switching upon clicking

<!DOCTYPE html>
<html>
<head>

    <link rel="stylesheet" type="text/css" href="./common/res.css"/>
    <meta charset="utf-8">
    <title>Room Reservation</title>
</head>
<header>
</header>
<body>
    <div class="tabs">
        <ul class="tab-links">
            <li class="active"><a href="#tab1">Stage</a></li>
            <li><a href="#tab2">Studio</a></li>
            <li><a href="#tab3">Session</a></li>
        </ul>

<div class="tab-content">
    <div id="tab1" class="tab active">
        <form>
            Room Selection:<br>
            <select name="room">
                <option value="">Select Room</option>
                <option value="stage">Stage Access</option>
                <option value="grip">Grip Closet</option>
                <option value="grid">Grid</option>
    </div>
    <div id="tab2" class="tab">
        <p>Studio</p>
    </div>

    <div id="tab3" class="tab">
        <p>Session</p>
    </div>
</div>
</div>
</body>
</html>


en/*----- Tabs -----*/
.tabs {
width:100%;
display:inline-block;
}

/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
    display:block;
    clear:both;
    content:'';
}

.tab-links li {
    margin:0px 5px;
    float:left;
    list-style:none;
}

    .tab-links a {
        padding:9px 15px;
        display:inline-block;
        border-radius:3px 3px 0px 0px;
        background:#7FB5DA;
        font-size:16px;
        font-weight:600;
        color:#4c4c4c;
        transition:all linear 0.15s;
    }

    .tab-links a:hover {
        background:#a7cce5;
        text-decoration:none;
    }

li.active a, li.active a:hover {
    background:#fff;
    color:#4c4c4c;
}

/*----- Content of Tabs -----*/
.tab-content {
    padding:15px;
    border-radius:3px;
    box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
    background:#fff;
}

    .tab {
        display:none;
    }

    .tab.active {
        display:block;
    }ter code here


jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e)  {
    var currentAttrValue = jQuery(this).attr('href');

    // Show/Hide Tabs
    jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

    // Change/remove current tab to active
           jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

    e.preventDefault();
});
});

Thanks

Answer 1

<!DOCTYPE html><html>
<head>
    <script         src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <meta charset="utf-8">
    <title>Room Reservation</title>
</head>
<header>
</header>
<body>
<div class="tabs">
    <ul class="tab-links">
        <li class="active" data-toggle="#tab1">Stage</a></li>
        <li data-toggle="#tab2">Studio</li>
        <li data-toggle="#tab3">Session</li>
    </ul>
</div>`
<div class="tab-content">
    <div id="tab1" class="tab active">
        <form>
            Room Selection:<br>
            <select name="room">
                <option value="">Select Room</option>
                <option value="stage">Stage Access</option>
                <option value="grip">Grip Closet</option>
                <option value="grid">Grid</option>
            </select>
        </form>
    </div>
    <div id="tab2" class="tab">
        <p>Studio</p>
    </div>`

    <div id="tab3" class="tab">
        <p>Session</p>
    </div>
</div>
<style>`
`.tabs {
    width:100%;
    display:inline-block;
}
.tab-links li {
    margin:0px 5px;
    float:left;
    list-style:none;
    padding:9px 15px;
    display:inline-block;
    border-radius:3px 3px 0px 0px;
    background:#7FB5DA;
    font-size:16px;
    font-weight:600;
    color:#4c4c4c;
    transition:all linear 0.15s;
}
.tab-links li:hover {
    background:#a7cce5;
    text-decoration:none;
}
li.active, li.active:hover {
    background:#fff;
    color:#4c4c4c;
}
.tab-content {
    padding:15px;
    border-radius:3px;
    box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
    background:#fff;
 }`

 .tab {
    display:none;
 }

.tab.active {
    display:block;
}`

</style>
<script>
    jQuery(document).ready(function() {
        jQuery('.tabs .tab-links li').on('click', function(e)  {
        tabs(jQuery(this).attr('data-toggle'));
        jQuery(this).addClass('active').siblings().removeClass('active');
        });`

        function tabs(tab) {
            jQuery('.tab-content .tab').hide()
            jQuery('.tab-content').find(tab).show();
        }
    });
    </script>
    </body>
</html>

First of all you should include jquery library, then correct your html, and use fucntions from start please, be true! :DI suggesting you to not use a tags in tabs

Need help making tab page in HTML

Question

1 answers

solution1
0 2016-02-19 22:15:47

Need help making tab page in HTML

Question

1 answers

solution1 0 2016-02-19 22:15:47

solution1
0 2016-02-19 22:15:47