Голям проблем с вграждане на jquery и tabs меню

M

macmen

Registered
Здравейте имам следния проблем. Имам код за табове, като е в отделен файл няма проблем работи си без проблем но като почна да го вграждам в моя дизайн не иска да работи просто. Моля кажете, какъв е проблема

ето и кода




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" >
$(document).ready(function() {

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {

$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content

var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});

});
</script>
<style type="text/css" >

ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height of tabs--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 31px; /*--Vertically aligns the text within the tab--*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}



.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
</style>
</head>
<body>


<ul class="tabs">
<li><a href="#tab1">Gallery</a></li>
<li><a href="#tab2">Submit</a></li>
</ul>

<div class="tab_container">
<div id="tab1" class="tab_content">
wdasssadsadsddas
</div>
<div id="tab2" class="tab_content">
22222
</div>
</div>





</body>
</html>
Увеличете...



а това е кода на index където искам да го вградя


Код: 
<?php
require "include/session.php"; 
        if(!isset($_COOKIE['lang']))
        {
            setcookie("lang", "bg", time()+3600*24*365);
            header('refresh: 0; url=index');
        }
    else
    {
        if(isset($_COOKIE['lang']) && file_exists("language/".$_COOKIE['lang'].".php")){
                require "language/".$_COOKIE['lang'].".php";
        }
        else{
                require "language/".$_COOKIE['lang'].".php";
        }
        function lang_changer($lang)
                {
                if(isset($lang)){
                        setcookie("lang", $lang, time()+3600*24*365);   
                    header("Location: ".$_SERVER['HTTP_REFERER']);    
                }
                }
                lang_changer($_GET['lang']);    
    }
define('IN_VALID', true); 
include "template/header.php";
?>
<div id="bg_home_content">
    <div id="bg_home_content_padding">
        <div id="left_body">
        
            <div id="reklama_slider">
                            <img alt="dassasdsdaasd"  src="images/reklama_centralna.png" width="550" />
                         </div>
                    <div id="reklama_slider">
                            <img alt="dassasdsdaasd"  src="images/reklama_centralna.png" width="550" />
                         </div>
            
            
        </div>
        <div id="right_body">

                          <div id ="nav-menu-center"><?=Seriali_kategorii;?></div>
                         <div id="Seriali_kategorii" >

                            <ul>
                                <li><a href="#">The Vampire Diaries</a></li>
                                 <li><a href="#">The Vampire Diaries</a></li>
                                  <li><a href="#">The Vampire Diaries</a></li>
                                   <li><a href="#">The Vampire Diaries</a></li>
                                    <li><a href="#">The Vampire Diaries</a></li>
                                     <li><a href="#">The Vampire Diaries</a></li>
                            </ul>
                        </div>

                                tyk trqbva da se vgradi

            
        </div>
    </div> 

</div>
<?
include "template/footer.php";
?>
 
index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="tabstyle.css" />


Вероятно тук имаш някакъв друг css/javascript или подобно, който трябва да въведеш :)

<?php
require "include/session.php";
if(!isset($_COOKIE['lang']))
{
setcookie("lang", "bg", time()+3600*24*365);
header('refresh: 0; url=index');
}
else
{
if(isset($_COOKIE['lang']) && file_exists("language/".$_COOKIE['lang'].".php")){
require "language/".$_COOKIE['lang'].".php";
}
else{
require "language/".$_COOKIE['lang'].".php";
}
function lang_changer($lang)
{
if(isset($lang)){
setcookie("lang", $lang, time()+3600*24*365);
header("Location: ".$_SERVER['HTTP_REFERER']);
}
}
lang_changer($_GET['lang']);
}
define('IN_VALID', true);
include "template/header.php";
?>
<div id="bg_home_content">
<div id="bg_home_content_padding">
<div id="left_body">

<div id="reklama_slider">
<img alt="dassasdsdaasd" src="images/reklama_centralna.png" width="550" />
</div>
<div id="reklama_slider">
<img alt="dassasdsdaasd" src="images/reklama_centralna.png" width="550" />
</div>


</div>
<div id="right_body">

<div id ="nav-menu-center"><?=Seriali_kategorii;?></div>
<div id="Seriali_kategorii" >

<ul>
<li><a href="#">The Vampire Diaries</a></li>
<li><a href="#">The Vampire Diaries</a></li>
<li><a href="#">The Vampire Diaries</a></li>
<li><a href="#">The Vampire Diaries</a></li>
<li><a href="#">The Vampire Diaries</a></li>
<li><a href="#">The Vampire Diaries</a></li>
</ul>
</div>

<script type="text/javascript" >
$(document).ready(function() {

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {

$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content

var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});

});
</script>

<ul class="tabs">
<li><a href="#tab1">Gallery</a></li>
<li><a href="#tab2">Submit</a></li>
</ul>

<div class="tab_container">
<div id="tab1" class="tab_content">
wdasssadsadsddas
</div>
<div id="tab2" class="tab_content">
22222
</div>
</div>


</div>
</div>

</div>
<?
include "template/footer.php";
?>
Увеличете...


tabstyle.css

ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height of tabs--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 31px; /*--Vertically aligns the text within the tab--*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}



.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
Увеличете...



Мисля,че така би трябвало да работи :) (Не забравяй да промениш нещата в червено.)
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе