问如何使用photonkit将内容放入电子标签中？
EN

Stack Overflow用户

提问于 2017-08-10 04:22:28

回答 1查看 735关注 0票数 0

我想建立一个简单的电子应用程序与选项卡式界面。乍一看，Photon-kit看起来很容易使用。我可以显示选项卡，但我不知道如何显示选项卡中的任何内容。我在网上找不到任何展示如何添加内容的例子。

如果有人可以给我一个例子，我会很感激，或者如果它不是太复杂的话，可以修改我一直在实验的代码，向我展示它是如何做到的。

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>

    <!-- Stylesheets -->
    <link rel="stylesheet" href="./css/photon.min.css">

    <!-- Javascript -->
    <!--<script src="js/menu.js" charset="utf-8"></script> -->
  </head>
  <body>
    <div class="window">

      <!-- .toolbar-header sits at the top of your app -->
      <header class="toolbar toolbar-header">
          <h1 class="Test"</h1>
      </header>

        <div class="tab-group">
          <div class="tab-item active">
            <span class="icon icon-cancel icon-close-tab"></span>
            Tab1
          </div>
          <div class="tab-item">
            <span class="icon icon-cancel icon-close-tab"></span>
            Tab2
          </div>
          <div class="tab-item">
            <span class="icon icon-cancel icon-close-tab"></span>
            Tab3
          </div>
        </div>

      <!-- Your app's content goes inside .window-content -->

  </body>
</html>

向您致敬，吉姆

javascript

electron

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-08-11 05:07:02

我猜这个问题说明了我对html的使用有多少。不管怎样，以防其他人像我一样被卡住。经过大量的试验和错误，这里是一些测试代码，它做了我需要的。

 <!DOCTYPE html>
<html>
  <head>
    <title>Test</title>

    <!-- Stylesheets -->
    <link rel="stylesheet" href="./css/photon.min.css">

    <!-- Javascript -->
    <!--<script src="js/menu.js" charset="utf-8"></script> -->
  </head>
  <body>
    <div class="window">

      <!-- .toolbar-header sits at the top of your app -->
      <header class="toolbar toolbar-header">
          <h1 class="title">Test</h1>
      </header>

        <div class="tab-group">
          <div class="tab-item" onclick="showTab(event, 'income')" >
            <span class="icon icon-cancel icon-close-tab"></span>
            Income
          </div>
          <div class="tab-item active" onclick="showTab(event, 'expense')">
            <span class="icon icon-cancel icon-close-tab"></span>
            Expense
          </div>
          <div class="tab-item" onclick="showTab(event, 'names')">
            <span class="icon icon-cancel icon-close-tab"></span>
            Names
          </div>
        </div>

      <!-- Your app's content goes inside .window-content -->
    <div id="income"  class="window-content" style="display: none;">
        Test1
    </div>
    <div id="expense" class="window-content" style="display:none;">
        Test2
    </div>
    <div id="names" class="window-content" style="display:none;">
        Test3
    </div>
    <script>
        function showTab(event, tabName) {
            //alert('test');
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("window-content");
            for (i=0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";   
            }

            tablinks = document.getElementsByClassName("tablinks");
            for ( i=0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace("active", "");   
            }
            document.getElementById(tabName).style.display = "block";
            event.currentTarget.className += " active";
        }
        </script>
  </body>
</html>

向您致敬，吉姆

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45600000

复制

相似问题

问如何使用photonkit将内容放入电子标签中？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用photonkit将内容放入电子标签中？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用photonkit将内容放入电子标签中？
EN