• 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.
    • 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

New 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

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>
 

Malcolm

Administrator
Administrator
Staff Team
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:

HTML:
  <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>

Let me know if that helps.
 

BGB

Active Coder
Staff Team
Guardian
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>
 

strawbs89

New Coder
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
 

strawbs89

New Coder
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
 

strawbs89

New Coder
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

BGB

Active Coder
Staff Team
Guardian
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;
}
 

strawbs89

New Coder
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
 

strawbs89

New Coder
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
 

BGB

Active Coder
Staff Team
Guardian
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.
 

strawbs89

New Coder
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
 

strawbs89

New Coder
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
 

BGB

Active Coder
Staff Team
Guardian
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">
 

Top