Zakładka po kliknięciu przycisku 2 i 3 nie pokazuje jej zawartości (wyświetlanie kart w stylu Pills)

pytanie zadane 3 kwietnia 2016 w HTML i CSS przez Krzysiek_34 Mądrala (6,090 p.)

Witam.

Stworzyłem zakładkę, która umożliwia mi przełączanie się na podstawie trzech przycisków bez przeładowywania strony. Niestety po kliknięciu na kartę [2 zakładka] i [3 zakładka] nie jest wyświetlana ich zawartość.

<head>

	<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="script.js"></script>

</head>

		<div id="content">
		
			<ul class="nav nav-pills" role="tablist">
				<li class="active"><a href="#1przycisk" role="tab" data-toggle="tab">1 przycisk</a></li>
				<li><a href="#2przycisk" role="tab" data-toggle="tab">2 przycisk</a></li>
				<li><a href="#3przycisk" role="tab" data-toggle="tab">3 przycisk</a></li>
			</ul>

			<div class="tab-content">
				<div class="tab-pane active" id="1przycisk">Zawartość pierwszego przycisku</div>
				<div class="tab-pane" id="2przycisk">Zawartość drugiego przycisku</div>
				<div class="tab-pane" id="3przycisk">Zawartość trzeciego przycisku</div>
			</div>
		</div>

#content
{
	background-color: #DEDEDE;
	min-height: 400px;
}

Do karty, np. 3 zakładka zastosowałem taki zapis:

<li class="active"><a href="#3przycisk" role="tab" data-toggle="tab">3 przycisk</a></li>
<div class="tab-pane active" id="3przycisk">Zawartość trzeciego przycisku</div>

i niestety nie pokazuje jego zawartości.

Gdzie jest błąd?

1 odpowiedź

odpowiedź 3 kwietnia 2016 przez damek1010 Obywatel (1,880 p.)

Błąd jest w nieprawidłowo użytych znacznikach <link> i <script>. Atrybuty href i src powinny zawierać link do strony. Tag <a> tworzy odnośnik na stronie, tak jak to ma miejsce dalej w tym kodzie. W html'u nigdy nie wprowadza się znacznika do atrybutu innego znacznika. Uwagi co do kodu:

Dodaj znaczniki <html> i <body>
W przypadku atrybutów id i class nie zaczynaj nazw od liczb, w html'u może to mało istotne,ale gdybyś w przyszłości chciał programować np. w c++ to będzie ci łatwiej z racji tego, że nie będziesz musiał wyrabiać nowych nawyków.

komentarz 3 kwietnia 2016 przez Krzysiek_34 Mądrala (6,090 p.)

Zrobiłem i teraz działa. Po kliknięciu na poszczególne przyciski zmienia się ich treść.

<head>

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc2/css/bootstrap.css" rel="stylesheet" media="screen">

</head>

<body>

		<div id="content">
			<ul class="nav nav-pills" role="tablist">
				<li class="active"><a href="#1przycisk" role="tab" data-toggle="tab">1 przycisk</a></li>
				<li><a href="#2przycisk" role="tab" data-toggle="tab">2 przycisk</a></li>
				<li><a href="#3przycisk" role="tab" data-toggle="tab">3 przycisk</a></li>
			</ul>

			<div class="tab-content">
				<div class="tab-pane active" id="1przycisk">Zawartość pierwszego przycisku</div>
				<div class="tab-pane" id="2przycisk">Zawartość drugiego przycisku</div>
				<div class="tab-pane" id="3przycisk">Zawartość trzeciego przycisku</div>
			</div>
		</div>

	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

	<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc2/js/bootstrap.min.js"></script>

</body>

body
{
	background-color: #303030;
	font-family: Verdana;
	margin: 0px;
}

#content
{
	background-color: #DEDEDE;
	min-height: 400px;
}

Ale pojawił się pewien problem. Tło strony zrobiło się białe i górna część menu uległa zmianie na gorsze. Przyczyną pewnie jest link bootstrapa. Podejrzewam, że musiałbym użyć kodu JavaScripta i pozbyć się bootstrapa. Mam rację? Wiecie może co należy poprawić w kodzie, aby tło strony powróciło w kolorze ciemno-szarym #303030?

komentarz 3 kwietnia 2016 przez damek1010 Obywatel (1,880 p.)

Po pierwsze ta linijka jest bez sensu:

<link href="<a href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc2/css/bootstrap.css" "="" rel="nofollow" target="_blank" original-title="" title="">http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc2/css/bootstrap.css"</a> rel="stylesheet" media="screen">

Nie używa się tagów w ten sposób: <link href="<a href="..."... dalej nawet nie wiem, które zamknięcie jest do czego. Jak chcesz podpiąć plik css wystarczy, że użyjesz go tak:

<link href="sciezka-do-arkusza" rel="stylesheet" type="text/css">

Jeżeli chcesz skorzystać ze źródeł udostępnionych online to zazwyczaj twórca arkusza podaje linki. W przypadku bootstrapa też tak jest: http://getbootstrap.com/getting-started/. W sekcji "Bootstrap CDN" masz dwa tagi <link>- wybierasz, któryś kopiuj, wklej. Tak samo tag <script>.

Sugerowałbym, żebyś douczył się HTML'a, a dopiero potem brał się za bootstrapa.