Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

website tabs/pills

strawbs89

Active Coder
hi all hope someone can help

basically i am trying to create a schedule with the days of these week
using tabs now when you click

mon tue wed different text shows up? but thurs fri sat sun don't

see here

[CODE title="Website Tabs"] <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">


<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Mon</a></li>
<li><a data-toggle="tab" href="#menu1">Tue</a></li>
<li><a data-toggle="tab" href="#menu2">Wed</a></li>
<li><a data-toggle="tab" href="#menu3">Thu</a></li>
<li><a data-toggle="tab" href="#menu3">Fri</a></li>
<li><a data-toggle="tab" href="#menu3">Sat</a></li>
<li><a data-toggle="tab" href="#menu3">Sun</a></li>
</ul>

<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3></h3>
<p></p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Space</h3>
<p>10pm - 12am</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>NO DJ</h3>
<p></p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>hi</h3>
<p></p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>ted</h3>
<p></p>
</div>
</div>
</div>
</body>
</html>[/CODE]
 
Hey there!

So it looks like you have the Mon through Thursday have their own ID class but when you go to Friday it repeats for the rest of the week. See Thursday to Sunday down below:

[CODE lang="html" highlight="5,6,7"] <ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Mon</a></li>
<li><a data-toggle="tab" href="#menu1">Tue</a></li>
<li><a data-toggle="tab" href="#menu2">Wed</a></li>
<li><a data-toggle="tab" href="#menu3">Thu</a></li>
<li><a data-toggle="tab" href="#menu3">Fri</a></li>
<li><a data-toggle="tab" href="#menu3">Sat</a></li>
<li><a data-toggle="tab" href="#menu3">Sun</a></li>
</ul>[/CODE]

Let me know if that helps.
 
Something like this -
HTML:
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Menu Tab</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#home">Mon</a></li>
            <li><a data-toggle="tab" href="#menu1">Tue</a></li>
            <li><a data-toggle="tab" href="#menu2">Wed</a></li>
            <li><a data-toggle="tab" href="#menu3">Thu</a></li>
            <li><a data-toggle="tab" href="#menu4">Fri</a></li>
            <li><a data-toggle="tab" href="#menu5">Sat</a></li>
            <li><a data-toggle="tab" href="#menu6">Sun</a></li>
        </ul>

        <div class="tab-content">
            <div id="home" class="tab-pane fade in active">
                <h3></h3>
                <p></p>
            </div>
            <div id="menu1" class="tab-pane fade">
                <h3>Space</h3>
                <p>10pm - 12am</p>
            </div>
            <div id="menu2" class="tab-pane fade">
                <h3>NO DJ</h3>
                <p></p>
            </div>
            <div id="menu3" class="tab-pane fade">
                <h3>hi</h3>
                <p></p>
            </div>
            <div id="menu4" class="tab-pane fade">
                <h3>ted</h3>
                <p></p>
            </div>
            <div id="menu5" class="tab-pane fade">
                <h3>1pm - 4pm</h3>
                <p></p>
            </div>
            <div id="menu6" class="tab-pane fade">
                <h3>hello</h3>
                <p></p>
            </div>
        </div>
    </div>
</body>

</html>
 
Something like this -
HTML:
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Menu Tab</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#home">Mon</a></li>
            <li><a data-toggle="tab" href="#menu1">Tue</a></li>
            <li><a data-toggle="tab" href="#menu2">Wed</a></li>
            <li><a data-toggle="tab" href="#menu3">Thu</a></li>
            <li><a data-toggle="tab" href="#menu4">Fri</a></li>
            <li><a data-toggle="tab" href="#menu5">Sat</a></li>
            <li><a data-toggle="tab" href="#menu6">Sun</a></li>
        </ul>

        <div class="tab-content">
            <div id="home" class="tab-pane fade in active">
                <h3></h3>
                <p></p>
            </div>
            <div id="menu1" class="tab-pane fade">
                <h3>Space</h3>
                <p>10pm - 12am</p>
            </div>
            <div id="menu2" class="tab-pane fade">
                <h3>NO DJ</h3>
                <p></p>
            </div>
            <div id="menu3" class="tab-pane fade">
                <h3>hi</h3>
                <p></p>
            </div>
            <div id="menu4" class="tab-pane fade">
                <h3>ted</h3>
                <p></p>
            </div>
            <div id="menu5" class="tab-pane fade">
                <h3>1pm - 4pm</h3>
                <p></p>
            </div>
            <div id="menu6" class="tab-pane fade">
                <h3>hello</h3>
                <p></p>
            </div>
        </div>
    </div>
</body>

</html>
hi there i'll give this ago
 
Something like this -
HTML:
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Menu Tab</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#home">Mon</a></li>
            <li><a data-toggle="tab" href="#menu1">Tue</a></li>
            <li><a data-toggle="tab" href="#menu2">Wed</a></li>
            <li><a data-toggle="tab" href="#menu3">Thu</a></li>
            <li><a data-toggle="tab" href="#menu4">Fri</a></li>
            <li><a data-toggle="tab" href="#menu5">Sat</a></li>
            <li><a data-toggle="tab" href="#menu6">Sun</a></li>
        </ul>

        <div class="tab-content">
            <div id="home" class="tab-pane fade in active">
                <h3></h3>
                <p></p>
            </div>
            <div id="menu1" class="tab-pane fade">
                <h3>Space</h3>
                <p>10pm - 12am</p>
            </div>
            <div id="menu2" class="tab-pane fade">
                <h3>NO DJ</h3>
                <p></p>
            </div>
            <div id="menu3" class="tab-pane fade">
                <h3>hi</h3>
                <p></p>
            </div>
            <div id="menu4" class="tab-pane fade">
                <h3>ted</h3>
                <p></p>
            </div>
            <div id="menu5" class="tab-pane fade">
                <h3>1pm - 4pm</h3>
                <p></p>
            </div>
            <div id="menu6" class="tab-pane fade">
                <h3>hello</h3>
                <p></p>
            </div>
        </div>
    </div>
</body>

</html>
hi thank you very very much this does work! but what do i do if i want to keep adding more times for each day of week
 
You will need to add css to your html and design the rest as you like 🙂. This may help you to understand - tab panel.
i don't mean like that lol i mean just coloring the weekly tabs there selfs and not the text?

see attached image, one tab is red but when you hover and click the rest are red
 

Attachments

  • tabs.png
    tabs.png
    2.3 KB · Views: 2
I just design it to my like. Change it as you want -
HTML-
HTML:
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Menu Tab</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="main">
        <div class="container">
            <ul class="nav nav-tabs">
                <li><a class="active" data-toggle="tab" href="#home">Mon</a></li>
                <li><a data-toggle="tab" href="#menu1">Tue</a></li>
                <li><a data-toggle="tab" href="#menu2">Wed</a></li>
                <li><a data-toggle="tab" href="#menu3">Thu</a></li>
                <li><a data-toggle="tab" href="#menu4">Fri</a></li>
                <li><a data-toggle="tab" href="#menu5">Sat</a></li>
                <li><a class="no-margin" data-toggle="tab" href="#menu6">Sun</a></li>
            </ul>

            <div class="tab-content">
                <div id="home" class="tab-pane fade in active">
                    <h3></h3>
                    <p></p>
                </div>
                <div id="menu1" class="tab-pane fade">
                    <h3>Space</h3>
                    <p>10pm - 12am</p>
                </div>
                <div id="menu2" class="tab-pane fade">
                    <h3>NO DJ</h3>
                    <p></p>
                </div>
                <div id="menu3" class="tab-pane fade">
                    <h3>hi</h3>
                    <p></p>
                </div>
                <div id="menu4" class="tab-pane fade">
                    <h3>ted</h3>
                    <p></p>
                </div>
                <div id="menu5" class="tab-pane fade">
                    <h3>1pm - 4pm</h3>
                    <p></p>
                </div>
                <div id="menu6" class="tab-pane fade">
                    <h3>hello</h3>
                    <p></p>
                </div>
            </div>
        </div>
        <div class="space"></div>
    </div>
</body>

</html>
CSS-
CSS:
.main {
    width: 75%;
    display: flex;
    justify-content: space-between;
    margin: 5rem auto 0 auto;
}
.container {
    width: 75%;
}

.nav {
    display: flex;
    border-bottom: 7px solid #A70925;
}

.nav > li {
    width: 20%;
    text-align: center;
}

.nav > li > a {
    color: #000;
    background-color: #E6E6E6;
    border-bottom: 1px solid #A70925;
}

.nav .no-margin {
    margin-right: 0;
}

.nav .active,
.nav > li > a:hover {
    color: #FFF;
    background-color: #A70925;
    border: 1px solid #A70925;
}

.space {
    width: 35%;
    height: 10rem;
    background-color: #C70E35;
}
 
ok thanks
I just design it to my like. Change it as you want -
HTML-
HTML:
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Menu Tab</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="main">
        <div class="container">
            <ul class="nav nav-tabs">
                <li><a class="active" data-toggle="tab" href="#home">Mon</a></li>
                <li><a data-toggle="tab" href="#menu1">Tue</a></li>
                <li><a data-toggle="tab" href="#menu2">Wed</a></li>
                <li><a data-toggle="tab" href="#menu3">Thu</a></li>
                <li><a data-toggle="tab" href="#menu4">Fri</a></li>
                <li><a data-toggle="tab" href="#menu5">Sat</a></li>
                <li><a class="no-margin" data-toggle="tab" href="#menu6">Sun</a></li>
            </ul>

            <div class="tab-content">
                <div id="home" class="tab-pane fade in active">
                    <h3></h3>
                    <p></p>
                </div>
                <div id="menu1" class="tab-pane fade">
                    <h3>Space</h3>
                    <p>10pm - 12am</p>
                </div>
                <div id="menu2" class="tab-pane fade">
                    <h3>NO DJ</h3>
                    <p></p>
                </div>
                <div id="menu3" class="tab-pane fade">
                    <h3>hi</h3>
                    <p></p>
                </div>
                <div id="menu4" class="tab-pane fade">
                    <h3>ted</h3>
                    <p></p>
                </div>
                <div id="menu5" class="tab-pane fade">
                    <h3>1pm - 4pm</h3>
                    <p></p>
                </div>
                <div id="menu6" class="tab-pane fade">
                    <h3>hello</h3>
                    <p></p>
                </div>
            </div>
        </div>
        <div class="space"></div>
    </div>
</body>

</html>
CSS-
CSS:
.main {
    width: 75%;
    display: flex;
    justify-content: space-between;
    margin: 5rem auto 0 auto;
}
.container {
    width: 75%;
}

.nav {
    display: flex;
    border-bottom: 7px solid #A70925;
}

.nav > li {
    width: 20%;
    text-align: center;
}

.nav > li > a {
    color: #000;
    background-color: #E6E6E6;
    border-bottom: 1px solid #A70925;
}

.nav .no-margin {
    margin-right: 0;
}

.nav .active,
.nav > li > a:hover {
    color: #FFF;
    background-color: #A70925;
    border: 1px solid #A70925;
}

.space {
    width: 35%;
    height: 10rem;
    background-color: #C70E35;
}
ok thanks
 
I just design it to my like. Change it as you want -
HTML-
HTML:
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Menu Tab</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="main">
        <div class="container">
            <ul class="nav nav-tabs">
                <li><a class="active" data-toggle="tab" href="#home">Mon</a></li>
                <li><a data-toggle="tab" href="#menu1">Tue</a></li>
                <li><a data-toggle="tab" href="#menu2">Wed</a></li>
                <li><a data-toggle="tab" href="#menu3">Thu</a></li>
                <li><a data-toggle="tab" href="#menu4">Fri</a></li>
                <li><a data-toggle="tab" href="#menu5">Sat</a></li>
                <li><a class="no-margin" data-toggle="tab" href="#menu6">Sun</a></li>
            </ul>

            <div class="tab-content">
                <div id="home" class="tab-pane fade in active">
                    <h3></h3>
                    <p></p>
                </div>
                <div id="menu1" class="tab-pane fade">
                    <h3>Space</h3>
                    <p>10pm - 12am</p>
                </div>
                <div id="menu2" class="tab-pane fade">
                    <h3>NO DJ</h3>
                    <p></p>
                </div>
                <div id="menu3" class="tab-pane fade">
                    <h3>hi</h3>
                    <p></p>
                </div>
                <div id="menu4" class="tab-pane fade">
                    <h3>ted</h3>
                    <p></p>
                </div>
                <div id="menu5" class="tab-pane fade">
                    <h3>1pm - 4pm</h3>
                    <p></p>
                </div>
                <div id="menu6" class="tab-pane fade">
                    <h3>hello</h3>
                    <p></p>
                </div>
            </div>
        </div>
        <div class="space"></div>
    </div>
</body>

</html>
CSS-
CSS:
.main {
    width: 75%;
    display: flex;
    justify-content: space-between;
    margin: 5rem auto 0 auto;
}
.container {
    width: 75%;
}

.nav {
    display: flex;
    border-bottom: 7px solid #A70925;
}

.nav > li {
    width: 20%;
    text-align: center;
}

.nav > li > a {
    color: #000;
    background-color: #E6E6E6;
    border-bottom: 1px solid #A70925;
}

.nav .no-margin {
    margin-right: 0;
}

.nav .active,
.nav > li > a:hover {
    color: #FFF;
    background-color: #A70925;
    border: 1px solid #A70925;
}

.space {
    width: 35%;
    height: 10rem;
    background-color: #C70E35;
}
but i don't have anywhere to upload to to link the css
 
don't don't a server to test this files. Just make a folder and paste the html and css file inside that folder and open the html file. But you should download a localhost to test your website before you upload to a online server.
 
don't don't a server to test this files. Just make a folder and paste the html and css file inside that folder and open the html file. But you should download a localhost to test your website before you upload to a online server.
i have done that and i opened the html file but in which part do i paste the css i have to link the css to the html
 
don't don't a server to test this files. Just make a folder and paste the html and css file inside that folder and open the html file. But you should download a localhost to test your website before you upload to a online server.
1627124495922.png
this is what i get when i run the script in IE

1627124546558.png
this is what i have edited see where it says hottunez
 
You don't need to upload the css file anywhere. Just paste the style.css file near your schedule1.html file. And change the href path to this -
HTML:
<link rel="stylesheet" href="style.css">
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom