如何在选项卡中放置各种内容？

Question

So I managed to make this "Side menu" using purecss.io and it looks amazing. 因此，我设法使用purecss.io制作了“侧面菜单”，它看起来很棒。 My only problem is, how do i place content within these tabs? 我唯一的问题是，如何在这些选项卡中放置内容？ I have another html w/ php content that has a table and I want to be able to place it in a specific tab. 我还有另一个带表的html w / php内容，我希望能够将其放在特定的选项卡中。 How do I do it? 我该怎么做？ Here's the code 这是代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A layout example with a side menu that hides on mobile, just like the Pure website.">

    <title>Side Menu &ndash; Layout Examples &ndash; Pure</title>

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure.css">

    <!--[if lte IE 8]>
        <link rel="stylesheet" href="css/layouts/side-menu-old-ie.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
        <link rel="stylesheet" href="css/layouts/side-menu.css">
    <!--<![endif]-->

</head>
<body>
<div id="layout">
    <!-- Menu toggle -->
    <a href="#menu" id="menuLink" class="menu-link">
        <!-- Hamburger icon -->
        <span></span>
    </a>

    <div id="menu">
        <div class="pure-menu pure-menu-open">
            <a class="pure-menu-heading" href="#">Safedrive</a>

            <ul>
                <li><a href="#">Search</a></li>
                <li  class="menu-item-divided pure-menu-selected"><a href="#">Welcome</a></li>

                <li>
                    <a href="#">View Users Logs</a>
                </li>

                <li><a href="#">Register Admin</a></li>
            </ul>
        </div>
    </div>

    <div id="main">
        <div class="header">
            <h1>Safedrive Website</h1>
            <h2>Developer's tool</h2>
        </div>

        <div class="content">
            <h2 class="content-subhead">How to use this Website</h2>
            <p>
                Administrators are entitled to handling the users that have registered to the application. Create, delete and edit are some of the functions they can perform on the user log.<!--<a href="/css/layouts/side-menu.css" alt="Side Menu CSS">side-menu.css</a>, and the JavaScript in <a href="/js/ui.js">ui.js</a>. The JS file uses vanilla JavaScript to simply toggle an <code>active</code> class that makes the menu responsive.-->
            </p>


        </div>  
    </div>
</div>





<script src="js/ui.js"></script>


</body>
</html>

Here is the php/html i want to add in one of the tabs: 这是我要在选项卡之一中添加的php / html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>The Main Page</title>
        <link rel="stylesheet" type="text/css" href="themes\blue\style.css">
        <script type="text/javascript" src="jquery-latest.js"></script>
        <script type="text/javascript" src="jquery.tablesorter.js"></script>
        <script>
        $(document).ready(function()
        {
        $("#myTable").tablesorter();
        }

        );

        </script>
    </head>
    <body>
        <?php
//Connect to server

$connect = mysql_connect("localhost","root","");
if(!$connect){
    die("Can not connect: " . mysql_error());
}
mysql_select_db("safedrive", $connect);

$sql = "SELECT * FROM users";

$myData = mysql_query($sql,$connect);

echo "<table border=\"1\"  id=\"myTable\" class=\"tablesorter\">‏
<thead>
<tr>
<th>ID</th>
<th>Email</th>
<th>First Name</th>
<th>Last Name</th>
<th>Model</th>
<th>Year</th>
<th>Plate Number</th>
<th>City</th>
<th>Country</th>
</tr></thead>";

while($record = mysql_fetch_array($myData)){

echo "<tr>";
echo "<td>" . $record['id'] . "</td>";
echo "<td>" . $record['email'] . "</td>";
echo "<td>" . $record['firstName'] . "</td>";
echo "<td>" . $record['lastName'] . "</td>";
echo "<td>" . $record['model'] . "</td>";
echo "<td>" . $record['Year'] . "</td>";
echo "<td>" . $record['plateNumber'] . "</td>";
echo "<td>" . $record['city'] . "</td>";
echo "<td>" . $record['country'] . "</td>";
echo "<br />";
}

echo "</table>";

?>

    </body>
</html>

Answer 1

Consider this example of tabbed menu: 考虑以下选项卡式菜单示例：

<!DOCTYPE html>
<!-- File: index.html ->
<html>
    <head>
        <title>Menu Navigator</title>
        <link rel="stylesheet" href="style.css">
        <script src='script.js'></script>
    </head>
    <body>
     <div class="tabbed-menu">
        <ul class="tabs">
            <li id="page1" class="selected">Tab 1</li>
            <li id="page2">Tab 2</li>
            <li id="page3">Tab 3</li>
        </ul>
        <div class="content">
            <div id="page1_content" class="page selected">
                <?php $page1_content = file_get_contents('page1_content.html'); ?>
                <?php echo $page1_content; ?>
            </div>

            <div id="page2_content" class="page">
                <?php $page2_content = file_get_contents('page2_content.html'); ?>
                <?php echo $page2_content; ?>
            </div>

            <div id="page3_content" class="page">
                <?php $page3_content = file_get_contents('page2_content.html'); ?>
                <?php echo $page3_content; ?>
            </div>
        </div>
     </div>
    </body>
</html>

/*  This div class is the container for our menu.
    It defines attributes for everything inside. */
/*  File: style.css */
.tabbed-menu {
    font-family: "Helvetica";
    font-size: 15px;
    width: 600px;
}

/*  This ul class defines how your menu options
    will be arranged and also gives us a nice 
    dividing line between the menu and the content. */
ul.tabs {
    text-align: center;
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
    line-height: 26px;
    color: #0088CC;
    border-bottom: 1px solid #DDDDDD;
}

/*  This defines the look of the individual tabs of 
    your menu when they are contained in a tabs class ul */
ul.tabs li {
    margin-bottom: -1px;
    padding: 3px 10px 0 10px;
    border: 1px solid #DDDDDD;
    background: #EFEFEF;

    /*  inline-block tells the browser to arrange the list
        elements in a line rather than each element on its
        own line. */
    display: inline-block;

    /* The attributes here round the top left
        and right corners of the tabs. */
    border-top-left-radius: 6px; 
    border-top-right-radius: 6px;
}
/* This defines what a tab should look like when selected */
ul.tabs .selected {
    background: #FFF;
    border-bottom-color: transparent;
}
/* This defines how a tab looks when your mouse hovers above it */
ul.tabs li:hover {
    color: #333333;
    cursor: pointer;
    background: #FFFFFF;
}

/*  This centers all of the text within a page element */
div.page {
    text-align: center;
}
/*  This overrides the text centering we defined above if
    the text is within a list and also tells your browser
    not to put bullet points next to the text. */
div.page li {
    text-align: left;
    list-style-type: none;
}
div.page {
    display: none;
}
div.page.selected {
    display: block;
}

// File: script.js
$(document).ready(function() {
    $(".tabs li").click(function() {
        if(!$(this).hasClass("selected")) {
            var selectionId = $(this).attr("id");
            var page = $("div.page");
            // select the clicked tab and display the related content
            // only if it is not already selected
            $(".tabs li").removeClass("selected");
            $(this).addClass("selected");
            $(".content").fadeOut("slow", function() {
                $(".page").removeClass("selected");
                $(".page#"+selectionId+"_content").addClass("selected");
                $(".content").fadeIn("slow");
            });
        }
    });
});

I have added the php code related to getting the content from the corresponding file. 我已经添加了与从相应文件中获取内容相关的php代码。

This is an example I have made with guides from an online course: http://www.codecademy.com/courses/web-beginner-QucDr/0/1 . 这是我使用在线课程指南制作的一个示例： http : //www.codecademy.com/courses/web-beginner-QucDr/0/1 。

如何在选项卡中放置各种内容？

问题描述

1 个解决方案

解决方案1
0 2014-03-24 16:19:08

如何在选项卡中放置各种内容？

问题描述

1 个解决方案

解决方案1 0 2014-03-24 16:19:08

解决方案1
0 2014-03-24 16:19:08