文章/答案/技术大牛

发布

社区首页 >问答首页 >创建按钮，随机选择页面内的链接

问创建按钮，随机选择页面内的链接
EN

Stack Overflow用户

提问于 2022-01-23 04:53:12

回答 1查看 111关注 0票数 -2

我试图做到这一点，所以当人们选择页面顶部的按钮时，页面内的三个链接中的一个将被选中(它们看起来像带有jquery ui附件的选项卡，但我无法在笔上找到它)，但是尽管我有兴趣，我还是不能通过使用函数来使它工作，如果我做错了什么，有什么建议吗？在javascript中，我从未做过比基础更简单的事情。

这里是完整的代码，因为由于字符限制，我不能将完整的HTML和CSS放在文章中

Codepen：https://codepen.io/bladeranner5005/pen/GRMVGbR

HTML

<!doctype html>
<html lang="it" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <!--Required meta tags-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Font links-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&family=Libre+Franklin:wght@800&display=swap" rel="stylesheet">

    <!--Bootstrap CSS-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!--Plugins -->
    <link href="../external-files/jquery-ui-1.13.1.custom/jquery-ui.min.css" rel="stylesheet" type="text/css">
    <link href="../external-files/jquery-ui-1.13.1.custom/jquery-ui.theme.min.css" rel="stylesheet" type="text/css">
    <script src="../external-files/jquery-ui-1.13.1.custom/external/jquery/jquery.js" type="text/javascript"></script>
    <script src="../external-files/jquery-ui-1.13.1.custom/jquery-ui.min.js" type="text/javascript"></script>

    <!--Custom css-->
    <link href="../css/index-css.css" rel="stylesheet" type="text/css">

    <link href="../css/content-css.css" rel="stylesheet" type="text/css">



    <title>Andrea D'Angelo-Portfolio</title>
</head>

<body>

<!-- NAVBAR ----------------------------------------------------------------------------------------------------------->
<!--Modified bootstrap NAVBAR, with different colors and positioning when in desktop----------------------------------->

<nav class="navbar navbar-expand-lg fixed-top navbar-dark background-black">
    <a class="navbar-brand" href="#"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav mx-auto">
            <a class="nav-item nav-link nav-link-custom-1 nav-item-spacing" href="#">Home</a>
            <a class="nav-item nav-link nav-link-custom-1 nav-item-spacing" href="#">Curriculum</a>
            <a class="nav-item nav-link active nav-link-custom-1 nav-item-spacing" href="#">Portfolio</a>
            <a class="nav-item nav-link nav-link-custom-1 nav-item-spacing" href="#">Contatti</a>

            <!--Codice per il dropdown da: https://stackoverflow.com/questions/17904862/bootstrap-position-of-dropdown-menu-relative-to-navbar-item-->

            <!--<li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle nav-link-custom-2 nav-item-spacing" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    
            </li>-->
        </div>

        <!--Dropdown item end-->

    </div>
</nav>

<!--Main tag----------------------------------------------------------------------------------------------------------->

<main>

    <!--Name--------------------------------------------------------------------------------------------------------------->
    <section class="container-fluid">

        <div class="row">

            <div class="col-12 text-center background-black mb-5">
                <h1 class="page-title-font">PORTFOLIO</h1>
            </div>

        </div>

    </section>

    <!--Random selector------------------------------------------------------------------------------------------------>

    <!--Start container-->
    <footer class="container-fluid">

        <!--ROW 1-->
        <div class="row mb-5 mt-5">

            <!--ROW 1-A-->
                <div class="container-fluid">

                    <div class="row">

                        <div class="col-2 col-md-4"></div>

                            <div class="col-8 col-md-4">
                                <button type="button" class="link-btn-light btn btn-light w-100" id="random-select">Selezione</button>
                            </div>

                        <div class="col-2 col-md-4"></div>

                    </div>

                </div>

        </div>

    <!--CONTENT-------------------------------------------------------------------------------------------------------->

    <section class="container-fluid me-0 ms-0">

        <div class="row">

            <div id="tabs">

                <ul id="tab-id">

                    <li><a href="#heading1" id="pastichair">Pastichair</a></li>
                    <li><a href="#heading2" id="bella-e-brava">Bella e brava</a></li>
                    <li><a href="#heading3" id="personal-space">Personal space</a></li>

                </ul>

              

            <script type="text/javascript">

                $( "#tabs").tabs();

            </script>

        </div>

    </section>



    <!--Footer start------------------------------------------------------------------------------------------------------->

    <!--Red line-->
    <div class="border-top border-5 border-danger" style="width: 100%"></div>


    <!--Start container-->
    <footer class="container-fluid">

        <!--ROW 1-->
        <div class="row mb-5 mt-5">

            <!--ROW 1-A-->
            <div class="col-12 col-md-6 mb-5 mb-md-0">

                <div class="container-fluid">

                    <div class="row">

                        <div class="col-2 col-md-3"></div>

                        <div class="col-8 col-md-6">
                            <a href="#" class="link-btn-light btn btn-light w-100">Home<br>page</a>
                        </div>

                        <div class="col-2 col-md-3"></div>

                    </div>

                </div>

            </div>

            <!--ROW 1-B-->
            <div class="col-12 col-md-6">

                <div class="container-fluid">

                    <div class="row">

                        <div class="col-2 col-md-3"></div>

                        <div class="col-8 col-md-6">
                            <a href="#" class="link-btn-light btn btn-light w-100">Online<br>curriculum</a>
                        </div>

                        <div class="col-2 col-md-3"></div>

                    </div>

                </div>

            </div>

        </div>

        <!--ROW 2-->
        <div class="row mb-5 mt-5">

            <!--ROW 2-A-->
            <div class="col-12 col-md-6 mb-5 mb-md-0">

                <div class="container-fluid">

                    <div class="row">

                        <div class="col-2 col-md-3"></div>

                        <div class="col-8 col-md-6">
                            <a href="#" class="link-btn-light btn btn-light w-100">Online<br>portfolio</a>
                        </div>

                        <div class="col-2 col-md-3"></div>

                    </div>

                </div>

            </div>

            <!--ROW 2-B-->
            <div class="col-12 col-md-6">

                <div class="container-fluid">

                    <div class="row">

                        <div class="col-2 col-md-3"></div>

                        <div class="col-8 col-md-6">
                            <a href="#" class="link-btn-light btn btn-light w-100">Full contacts<br>and info</a>
                        </div>

                        <div class="col-2 col-md-3"></div>

                    </div>

                </div>

            </div>

        </div>

    </footer>

</main>

<!-- Javascript for Bootstrap --------------------->
<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- Javascript for Bootstrap END------------------>

<!-- My Javascript -->

<script src="../javascript/portfolio-javascript.js"></script>


</body>
</html>

Javascript

//Variable declaration

let button = document.getElementById("random-select");

let tab1 = document.getElementById("pastichair");

let tab2 = document.getElementById("bella-e-brava");

let tab3 = document.getElementById("personal-space");

//Array e function, così da creare un numero casuale tra 0 e 2

let array = ["headerA", "headerB", "headerC"];

button.addEventListener("click", tabRandom())

    function tabRandom () {
        let randomNumber = Math.floor(Math.random() * array.length);

        //If statement per selezionare tab casuale

        if (randomNumber === 0) {
            tab1.addEventListener("click", function (){
                document.getElementById("pastichair").click();
            });
        }

        if (randomNumber === 1) {
            tab2.addEventListener("click", function (){
                document.getElementById("bella-e-brava").click();
            });
        }

        if (randomNumber === 2) {
            tab3.addEventListener("click", function (){
                document.getElementById("personal-space").click();
            });
        }

    }

function

if-statement

javascript

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-01-23 05:27:17

你可以做两件事来让它发挥作用。

首先，更改回调参数：

// incorrect, this is you execute a function and pass its value as a callback
button.addEventListener("click", tabRandom());

// correct, this is you pass a function as a callback
button.addEventListener("click", tabRandom);

然后，在tabRandom()内部，需要删除addEventListener以使触发器工作：

// not work, this is you assign an event
tab1.addEventListener("click", function (){
   document.getElementById("pastichair").click();
});

// trigger a click
document.getElementById("pastichair").click();

请参阅码页

票数 0

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

原文链接：

https://stackoverflow.com/questions/70819225

复制

相似问题

问创建按钮，随机选择页面内的链接
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建按钮，随机选择页面内的链接EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建按钮，随机选择页面内的链接
EN